Simplifying State Management with Redux in MERN Applications

// server.js 

const mongoose = require('mongoose')

const databaseConnection = () => {
    mongoose.connect(process.env.MONGOOSE_URI)
    console.log('Database connected successfully.')
    return true;
}

// defining schema 
const todosSchema = new mongoose.Schema({
    id: String,
    message: String,
    date: String
})

// defining todo model
const Todo = mongoose.model('Todo', todosSchema)

module.exports = {
    Todo,
    databaseConnection
}

// app.js 

const express = require('express')
const cors = require('cors')
const dotenv = require('dotenv')
const { Todo, databaseConnection } = require('./server')
const app = express()

dotenv.config()

// calling database 
databaseConnection();

// calling middlewares 
app.use(express.json())
app.use(cors())

const PORT = process.env.PORT || 8000

// fetching 

app.get('/api/get', async (req, res) => {
    try {
        const todos = await Todo.find();
        return res.json({ success: true, todos })
    } catch (error) {
        return res.json({ success: false, data: {}, error })
    }
})

// saving todos 
app.post('/api/save', async (req, res) => {
    try {
        const todos = req.body
        let data = new Todo(todos[1])
        await data.save();
        return res.json({ success: true, data })
    } catch (error) {
        return res.json({ success: false, data: {}, error })
    }
})

// listing server 
app.listen(PORT, () => {
    console.log(`Server is running on PORT : ${PORT}`)
})

// store.js 

// creating slice 

import { createSlice, configureStore } from "@reduxjs/toolkit";

// initial state of the todo slice 
const initialState = {
    todos: [
        {
            id: '',
            message: '',
            date: ''
        }
    ]
}

const todoSlice = createSlice({
    name: 'Todo Slice',
    initialState,
    reducers: {
        addTodo: (state, action) => {
            state.todos.push(action.payload)
        },
    }
})

export const { addTodo } = todoSlice.actions



// creating store 
const store = configureStore({
    reducer: todoSlice.reducer
})


export default store; 

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    Todos, AddTodo,
    GetDatabaseTodos, SaveToDatabase
} from './TodoComp'
import { Provider } from 'react-redux'
import './style.css'
import store from './store';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <div id='app_wrapper' >
            <h2 id='todo_banner'>Your's Todo</h2>
            <AddTodo />
            <Todos />
            <GetDatabaseTodos />
            <SaveToDatabase />
        </div>
    </Provider>
);

// TodoComp.js

import React, { useState } from "react";
import axios from "axios";
import { useSelector, useDispatch } from "react-redux";
import { addTodo } from './store'


export function Todos() {
    const todos = useSelector((state) => state.todos)
    console.log(todos);
    return (
        <div id="todos_wrapper">
            {
                todos && todos.map((todo) => {
                    if (todo.message)
                        return (
                            <div className='todo' key={todo.id} >
                                <span>{todo.message}</span>
                                <span> <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                                    alt="gfg_logo" /> </span>
                                <span>{todo.date}</span>
                            </div>
                        )
                })
            }
        </div >
    )
}

export function GetDatabaseTodos() {
    const dispatch = useDispatch()
    const getTodosHandle = async () => {
        try {
            let todos =
                await axios.get(
                    'https://gray-teacher-awrcf.pwskills.app:8000/api/get')
            todos = todos.data.todos
            console.log(todos);
            todos.map((todo) => {
                return dispatch(addTodo(
                    {
                        id: todo.id, message: todo.message,
                        date: todo.date
                    }))
            })
        } catch (error) {
            return alert('Please try later.')
        }
    }
    return (
        <button id='get_todos_btn'
            onClick={getTodosHandle}>
            Get Database's Todos
        </button>
    )
}

export function SaveToDatabase() {
    const todos = useSelector((state) => state.todos)
    const saveHandle = async () => {
        try {
            await axios.post(
                'https://gray-teacher-awrcf.pwskills.app:8000/api/save', todos)
            return alert('Todos save successfully!')
        } catch (error) {
            return alert('Todos save failed!')
        }
    }
    return (
        <button id='save_btn'
            onClick={saveHandle}>
            Save To DataBase
        </button>
    )
}

export function AddTodo() {
    const dispatch = useDispatch();
    const [message, setMessage] = useState('')
    const addTodoHandle = () => {
        if (message.trim() === '') return
        let date = new Date()
        date = `${date.getDate()}-${date.getMonth()}-
                ${date.getFullYear()} ${date.getHours()}:
                ${date.getMinutes()}`
        dispatch(addTodo(
            {
                id: Math.random().toFixed(5),
                message, date
            }))
        setMessage('')
    }
    return (
        <div id="add_todo_wrapper">
            <input type="text" id="input_box"
                value={message}
                onChange={
                    (e) => setMessage(e.target.value)
                } />
            <button id="add_btn" onClick={addTodoHandle} >Add</button>
        </div>
    )
}