React Redux Folder structure

First of all create redux folder structure. In this folder structure we have to create "Constant" , "Action" and "Reducer" folder and also create one file for store all redux data in "store.js".

Now we have to create constant.js file in Constant folder and define all action needs in our application like 'ADD' , 'DELETE' , 'EDIT' etc.

export const ActionType = {
    ADD_TODO:'ADD_TODO',
    DELETE_TODO:'DELETE_TODO',
}
Next we need to create action for our application in action folder. 
action.js

import {ActionType} from '../constant/action-type'

export const addtodo = (todos) =>{
    return {
        'type':ActionType.ADD_TODO,
        'payload':todos

    }
}
export const delete_todo = (id) =>{
    return{
        'type' : ActionType.DELETE_TODO,
        'payload' : id
    }
}
Now we have create our reducer function in reducer folder.
todoreducer.js



import { ActionType } from "../constant/action-type";


const inialstate = {
    todos :[]
}

export const addtodoreducer = (state = inialstate,{type,payload}) =>{
 
    switch(type){
        case ActionType.ADD_TODO:
            return {
                
                todos:[
                    ...state.todos,
                    {
                        payload
                    }
                ]
                
                };
          
        case ActionType.DELETE_TODO:
            const newstate = state.todos.filter((elem)=> elem.payload[0].id !== payload)
            return {
               ...state,
               todos:newstate
            }    
        default:
            return state;

    }
}
we need to create one file in reducer folder for combine all reducer.
index.js


import {combineReducers} from 'redux';
import { addtodoreducer } from './todosreducer';


const reducer = combineReducers({
    alltodos : addtodoreducer
})

export default reducer;

And last we have create store.js file for store all state data using redux.
store.js

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(
    reducer,
    {},
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )

export default store;
For add and delete todo list we have to add below code in App.js file



 import './App.css';
import {useState} from 'react'
import {useDispatch,useSelector} from 'react-redux'
import {addtodo,delete_todo} from './redux/action/action'

function App() {
  const [todo , setTodo] = useState([])
  const dispatch = useDispatch();
  const fetchdata = useSelector((state) => state.alltodos.todos);

  const addtodofun = (e) =>{
    //console.log(todo);

    const min = 1;
    const max = 100;
    const rand = min + Math.random() * (max - min);
    const todoarr = [{
      id: rand,
      item:todo
    }]
    dispatch(addtodo(todoarr));
    setTodo('');
    console.log(fetchdata);
  }
 const todoinput = (e) =>{
    
    setTodo(e.target.value)
  }
  const deleterow = (id) =>{
    dispatch(delete_todo(id))
  }
  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo App</h1>    
       <input placeholder='Enter todo name' onChange={todoinput} value={todo}/>
       <button onClick={addtodofun}>Add Todo</button>
       <br/>
       <ul>
        {
          fetchdata.map((elem,ind)=>(
          <li key={elem.payload[0].id} onClick={()=>deleterow(elem.payload[0].id)}>{elem.payload[0].item}</li>
          )
          )
        }
    </ul>
      </header>
      
    </div>
  );
}

export default App;
And last we need to get store all state in any component in application for that in index,js file import Provider  component  from react-redux lib.
index.js



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();