{"id":26674598,"url":"https://github.com/dineshkumar-mb/redux1-task","last_synced_at":"2026-04-15T08:39:00.382Z","repository":{"id":244249525,"uuid":"814691942","full_name":"dineshkumar-mb/redux1-task","owner":"dineshkumar-mb","description":"In the shopping cart cart items that Needs to Increase or Decrease the per unit Quantity that should automatically updates the total Quantity and Amount.","archived":false,"fork":false,"pushed_at":"2024-06-13T14:18:20.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T02:41:02.866Z","etag":null,"topics":["mdbootstrap","react","react-router","reactrouterdom","redux-toolkit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dineshkumar-mb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-13T14:02:33.000Z","updated_at":"2024-06-13T14:21:32.000Z","dependencies_parsed_at":"2024-06-13T17:26:16.780Z","dependency_job_id":null,"html_url":"https://github.com/dineshkumar-mb/redux1-task","commit_stats":null,"previous_names":["dineshkumar-mb/redux1-task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dineshkumar-mb/redux1-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineshkumar-mb%2Fredux1-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineshkumar-mb%2Fredux1-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineshkumar-mb%2Fredux1-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineshkumar-mb%2Fredux1-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dineshkumar-mb","download_url":"https://codeload.github.com/dineshkumar-mb/redux1-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineshkumar-mb%2Fredux1-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31833836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mdbootstrap","react","react-router","reactrouterdom","redux-toolkit"],"created_at":"2025-03-26T02:38:30.826Z","updated_at":"2026-04-15T08:39:00.349Z","avatar_url":"https://github.com/dineshkumar-mb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React Redux Task\n\nFunctionalities Required\n\nNeeds to Increase or Decrease the per unit Quantity that should automatically updates the total Quantity and Amount.\n\nRedux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. \nReact Redux is conceptually simple\n\n\nWhat is Redux?\nRedux is a state management library that allows you to manage the state of your JavaScript applications more efficiently and predictably.\n\nHow Does Redux Work?\nAs previously mentioned, Redux enables you to maintain a single centralized store that manages the state of your entire application. All components in your application can access this store and update or retrieve data from it as needed.\n\nThe key components that enable this centralized approach to state management are:\nStore\nActions\nDispatch\nReducers\nLet’s explore the role of each one:\n\nThe Store\nThe Redux store is like a giant container that holds all the data for your application.\n\n\nThink of the store as a box with different compartments for different data types. You can store any data you want in these compartments, and it can hold various kinds of data, such as strings, numbers, arrays, objects, and even functions.\n\nAlso, the store is the single source of truth for your application's state. This means that any component in your application can access it to retrieve and update data.\n\nActions\nAn action is an object that describes what changes need to be made to the state of your application. It sends data from your application to the Redux store and serves as the only way to update the store.\n\nAn action must have a \"type\" property describing the action being performed. This \"type\" property is typically defined as a string constant to ensure consistency and avoid typos.\n\nIn addition to the \"type\" property, an action can have a \"payload\" property. The \"payload\" property represents the data that provides additional information about the action being performed. For example, if an action type is ADD_TASK, the payload might be an object containing a new task item's \"id\", \"text\", and \"completed status\".\n\nHere's an example of an action:\n\n{\n  type: 'ADD_TASK',\n  payload: {\n    id: 1,\n    text: 'Buy groceries',\n    completed: false\n  }\n}\nNote that to create actions, we use action creators. Action creators are functions that create and return action objects.\n\nHere is an example of an action creator that takes in a task's text and returns an action object to add the task to the Redux store:\n\nfunction addTask(taskText) {\n  return {\n    type: 'ADD_TASK',\n    payload: {\n      id: 1,\n      text: taskText,\n      completed: false\n    }\n  }\n}\nAn appropriate analogy for actions and action creators would be a chef using a recipe. The recipe outlines the required ingredients and instructions to prepare a dish, similar to how an action in Redux specifies the needed details to modify the state of an application.\nIn this scenario, the chef represents the action creator, who follows the recipe to create the dish, similar to how an action creator creates an action based on predefined properties.\n\nDispatch\nIn Redux, dispatch is a function provided by the store that allows you to send an action to update the state of your application.\nWhen you call dispatch, the store runs an action through all of the available reducers, which in turn update the state accordingly.\n\n\nYou can think of dispatch as a mail carrier who delivers mail to different departments in a large company. Just like how the mail carrier delivers mail to different departments, dispatch delivers actions to various reducers in your Redux store. Each reducer is like a department in the company that processes the mail and updates its own part of the company's data.\n\nReducers\nIn Redux, a reducer is a function that takes in the current state of an application and an action as arguments, and returns a new state based on the action.\n\nHere's an example of a simple reducer:\n\nconst initialState = {\n  count: 0\n};\n\nfunction counterReducer(state = initialState, action) {\n  switch(action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    case 'DECREMENT':\n      return { ...state, count: state.count - 1 };\n    default:\n      return state;\n  }\n}\nIn the above code, we have a simple reducer called \"counterReducer\" that manages the state of a count variable. It takes in two arguments: state and action. The state argument represents the current state of your application, while the action argument represents the action dispatched to modify the state.\n\nThe reducer then uses a switch statement to check the \"type\" of the action, and based on that type, it updates the state accordingly.\n\nFor example, if the action type is \"INCREMENT\", the reducer returns a new state object with the count incremented by 1. Also, if the action type is \"DECREMENT\", the reducer returns a new state object with the count decremented by 1.\n\nA perfect analogy for a reducer would be a kitchen blender. Just like a blender takes in different ingredients, blends them, and produces a smooth mixture, a reducer takes in the current state of an application and an action, processes them together, and produces a new state.\n\nExample Project – Real App Implementation\nNow that you understand the basics of Redux and how it works, let's create a simple real-world project. For this example, we'll create a basic ToDo List application where you can add and delete tasks.\n\nStep 1: How to set up the project\nCreate a new React project by running the following command in your terminal. Replace \"your-project-name\" with the name of your project.\n\nnpm create vite@latest your-project-name -- --template react\n\ncd your-project-name\n\nnpm install\nThe above command sequence will create a new React project using the Vite build tool and install all necessary dependencies.\n\nStep 2: How to install Redux\nRedux requires a few dependencies for its operations, namely:\n\nRedux: The core library enables the redux architecture.\nReact Redux: Simplifies connecting your React components to the Redux store.\nRedux Thunk: Allows you to write asynchronous logic in your Redux actions.\nRedux DevTools Extension: Connects your Redux application to Redux DevTools\nYou can install them using npm, as shown below:\n\nnpm install \\\n\nredux \\\n\nreact-redux \\\n\nredux-thunk \\\n\nredux-devtools-extension\nStep 3: How to set up reducers\nNow let's create the reducer for our application.\n\nIn the src directory, create a new folder called reducers, and inside that folder, create two new files: index.js and taskReducer.js.\n\nThe index.js file represents the root reducer, which combines all the individual reducers in the application. In contrast, the taskReducer.js file is one of the individual reducers that will be combined in the root reducer.\n\nimport taskReducer from \"./taskReducer\";\nimport { combineReducers } from \"redux\";\n\nconst rootReducer = combineReducers({\n  tasks: taskReducer,\n});\n\nexport default rootReducer;\nindex.js\nIn the above index.js file, we use the combineReducers function to combine all the individual reducers into a single root reducer. In this case, we only have one reducer (taskReducer), so we pass it in as an argument to combineReducers.\n\nThe resulting combined reducer is then exported so that other files in the application can import and use it to create the store.\n\nHere's the code for taskReducer:\n\nconst initialState = {\n  tasks: []\n};\n\nconst taskReducer = (state = initialState, action) =\u003e {\n  switch (action.type) {\n    case 'ADD_TASK':\n      return {\n        ...state,\n        tasks: [...state.tasks, action.payload]\n      };\n    case 'DELETE_TASK':\n      return {\n        ...state,\n        tasks: state.tasks.filter(task =\u003e task.id !== action.payload)\n      };\n    default:\n      return state;\n  }\n};\n\nexport default rootReducer;\ntaskReducer.js\nInside the above taskReducer.js file, we define a reducer function that takes two arguments: state and action. The state argument represents the current state of the application, while the action argument represents the action being dispatched to update the state.\n\nThe switch statement inside the reducer handles different cases based on the \"type\" of the action. For example, if the action type is ADD_TASK, the reducer returns a new state object with a new task added to the tasks array. And if the action type is DELETE_TASK, the reducer returns a new state object with the current tasks filtered to remove the task with the specified id.\n\nStep 4: How to create the Redux store\nNow that we have our basic setup ready, let's create a new file called store.js in the src directory. This is where you'll define your Redux store:\n\nimport { createStore, applyMiddleware } from \"redux\";\nimport thunk from \"redux-thunk\";\nimport { composeWithDevTools } from \"redux-devtools-extension\";\n\nimport taskReducer from \"./reducers/taskReducer\";\n\nconst store = createStore(\n  taskReducer,\n  composeWithDevTools(applyMiddleware(thunk))\n);\n\nexport default store;\nThe code above sets up a Redux store by creating a new instance of the store using the createStore function. Then, the rootReducer – which combines all the application's reducers into a single reducer – is passed as an argument to createStore.\n\nIn addition, the code also uses two other libraries: redux-thunk and redux-devtools-extension.\n\nThe redux-thunk library allows you to write asynchronous actions, while the redux-devtools-extension library enables you to use the Redux DevTools browser extension to debug and inspect the state and actions in the store.\n\nFinally, we export the store so we can use it in our application. We use the composeWithDevTools function to enhance the store with the ability to use the Redux DevTools extension, and the applyMiddleware function to apply the thunk middleware to the store.\"\n\nStep 5: How to connect the Redux Store to the application\nTo connect the Redux store to the ToDo application, we need to use the Provider component from the react-redux library.\n\nFirst, we import the Provider function and the Redux store we created into our main.jsx. Then, we wrap our App component with the Provider function and pass the store as a prop. This makes the Redux store available to all the components inside the App.\n\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\nimport \"./index.css\";\n\nimport { Provider } from \"react-redux\";\nimport store from \"./store\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003cReact.StrictMode\u003e\n    \u003cProvider store={store}\u003e\n      \u003cApp /\u003e\n    \u003c/Provider\u003e\n  \u003c/React.StrictMode\u003e\n);\nStep 6: How to use Redux DevTools\nOnce you've set up the Redux \u003cProvider\u003e in your application, you can start using the Redux DevTools extension. To get started with it, you'll need to download the Redux DevTools Extension for your browser.\n\nAfter installation, the DevTools will add a new tab to your browser's Developer Tools specifically for Redux.\n\nQPPsZDT\nClicking on the \"State\" tab within the Redux DevTools will show you the entire state of your Redux store and any actions that have been dispatched and their payloads.\n\nThis can be incredibly useful when debugging your application, as you can inspect the state and actions in real-time.\n\nStep 7: How to set up Redux Actions\nNow that we have everything set up, let's create our actions. As I mentioned before, actions represent something that happened in the application. For example, when a user adds a new task, it triggers an \"add task\" action. Similarly, when a user deletes a task, it triggers a \"delete task\" action.\n\nTo create the actions, create a new folder called \"actions\" in the src directory and then create a new file called index.js. This file will contain all of the action creators for our application.\n\nexport const addTodo = (text) =\u003e {\n  return {\n    type: \"ADD_TASK\",\n    payload: {\n      id: new Date().getTime(),\n      text: text,\n    },\n  };\n};\n\nexport const deleteTodo = (id) =\u003e {\n  return {\n    type: \"DELETE_TASK\",\n    payload: id,\n  };\n};\nThe above code exports two action creators: addTodo and deleteTodo. These functions return an object with a type property that describes the action that has occurred.\n\nIn the case of addTodo, the type property is set to \"ADD_TASK\", indicating that a new task has been added. The payload property contains an object with the new task's id and text values. The id is generated using the new Date().getTime() method creates a unique identifier based on the current timestamp.\n\nIn the case of deleteTodo, the type property is set to \"DELETE_TASK\", indicating that a task has been deleted. The payload property contains the id of the task to be deleted.\n\nThese action creators can be dispatched to the Redux store using the dispatch() method, which will trigger the corresponding reducer function to update the application state accordingly.\n\nStep 8: How to dispatch actions\nNow that we have created the necessary actions, we can move on to creating the components that will dispatch these actions.\n\nLet's create a new folder named \"components\" inside the src directory. Inside this folder, we will create two new files: Task.jsx and TaskList.jsx.\n\nThe Task.jsx component will be responsible for adding tasks. But before we proceed, we need to import the following into the file:\n\naddTodo action: To add new tasks to the state.\nuseDispatch hook: To dispatch the addTodo action.\nuseRef: Allows us to obtain a reference to HTML elements.\nimport { useRef } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { addTodo } from \"../actions\";\nOnce we have imported these necessary components, we can proceed to write code for Task.jsx.\n\nconst Task = () =\u003e {\n  const dispatch = useDispatch();\n  const inputRef = useRef(null);\n\n  function addNewTask() {\n    const task = inputRef.current.value.trim();\n    if (task !== \"\") {\n      dispatch(addTodo(task));\n      inputRef.current.value = \"\";\n    }\n  }\n\n  return (\n    \u003cdiv className=\"task-component\"\u003e\n      \u003cdiv className=\"add-task\"\u003e\n        \u003cinput\n          type=\"text\"\n          placeholder=\"Add task here...\"\n          ref={inputRef}\n          className=\"taskInput\"\n        /\u003e\n        \u003cbutton onClick={addNewTask}\u003eAdd task\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Task;\nIn the code above, we created a component consisting of an input field and a button. When a user clicks on the \"Add task\" button, the addNewTask function is executed. This function uses the useRef hook to obtain the input field's value, removes any leading or trailing whitespaces, and then dispatches the addTodo action with the new task as the payload.\n\nNow, let's move on to the TaskList.jsx component, responsible for rendering the list of tasks and handling task deletions. To achieve this, we need to import the following:\n\nThe useSelector hook provides access to the state from the Redux store.\nThe deleteTodo action, is responsible for removing a task from the list of tasks in the Redux store.\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { deleteTodo } from \"../actions\";\nWe will now write code for TaskList.jsx that maps over the tasks array and renders each task:\n\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { deleteTodo } from '../actions';\n\nconst TaskList = () =\u003e {\n  const tasks = useSelector((state) =\u003e state.tasks);\n  const dispatch = useDispatch();\n\n  const handleDelete = (id) =\u003e {\n    dispatch(deleteTodo(id));\n  };\n\n  return (\n    \u003cdiv className=\"tasklist\"\u003e\n      \u003cdiv className=\"display-tasks\"\u003e\n        \u003ch3\u003eYour tasks:\u003c/h3\u003e\n        \u003cul className=\"tasks\"\u003e\n          {tasks.map((task) =\u003e (\n            \u003cli className=\"task\" key={task.id}\u003e\n              {task.text}\n              \u003cbutton\n                className=\"delete-btn\"\n                onClick={() =\u003e handleDelete(task.id)}\n              \u003e\n                delete\n              \u003c/button\u003e\n            \u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default TaskList;\nHere, the component loops over each task in the tasks array and displays text and a delete button. When the user clicks the delete button, the handleDelete function is called, dispatching the deleteTodo action with the task's id as the payload.\n\nFinally, import the components into your App.jsx file and render them.\n\nimport Task from \"./components/Task\";\nimport TaskList from \"./components/TaskList\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cTask /\u003e\n      \u003cTaskList /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\nStep 9: Styling\nFor styling, copy the contents of this gist and paste it into your index.css file. The focus of this guide is only on functionality and not on styling. Therefore, only basic styles were included to ensure the application looked presentable.\n\nFinal Result\nAfter implementing everything, the final result of our ToDo List application should look something like this:\n\nAACNPOW\nAs shown above, we can add tasks by entering texts in the input field and clicking the \"Add task\" button. We can also delete tasks by clicking the \"delete\" button next to each task.\n\nThe state and actions of the application can also be easily tracked and inspected using Redux DevTools. This feature helps debug and understand how the app works under the hood.\n\nWith that, you now have a fully functional ToDo application powered by Redux! The source code for the app is available on this GitHub repository.\n\nFinally, it's important to note that an application's state is stored in memory when using Redux. Therefore, the state will be lost if a user refreshes the page or navigates away from the app.\n\nSo, to keep information even after a user leaves or closes the page, you need to store that information somewhere else outside of the app's memory. Various techniques, such as local or server-side storage, can be used to accomplish this.\n\nCongratulations! You now have a good grasp of how to integrate Redux into your React applications. In the next section, we will explore Redux Toolkit and discover how it can simplify the process of writing Redux code with less effort.\n\nHow to Use Redux Toolkit\nWriting Redux code can become complex and verbose, particularly as the size of an application grows. As the number of reducers and actions increase, it can become challenging to manage the different pieces and keep track of everything.\n\nFortunately, Redux Toolkit provides a solution to this problem. It gives a more streamlined and efficient way to manage the state of your application by abstracting away some of the more complex and repetitive aspects of Redux, such as creating reducers and actions.\n\nAdvantages of Redux Toolkit\nRedux Toolkit provides several advantages over traditional Redux:\n\nIt is easier to set up and requires fewer dependencies.\nReduces boilerplate code by allowing the creation of a single file known as \"slice\" that combines actions and reducers.\nProvides sensible defaults for commonly used features, such as Redux Thunk and Redux DevTools. This means that you don't have to spend time configuring these features yourself, as they are already built into Redux Toolkit.\nIt uses the immer library under the hood, which enables direct state mutation and eliminates the need for manually copying the state {...state} with every reducer.\nIn the next sections, we will explore how to use Redux Toolkit to simplify the Redux code for the ToDo application we built earlier.\n\nHow to set up Redux Toolkit\nTo use Redux Toolkit in your React application, you need to install two dependencies: @reduxjs/toolkit and react-redux.\n\nThe @reduxjs/toolkit package provides the necessary tools to simplify Redux development, while react-redux is needed to connect your Redux store to your React components.\n\nnpm install @reduxjs/toolkit react-redux\nHow to create a slice\nOnce you have installed the needed dependencies, create a new \"slice\" using the createSlice function. A slice is a portion of the Redux store that is responsible for managing a specific piece of state.\n\nThink of the Redux store as a cake, where each slice represents a specific piece of data in the store. By creating a slice, you can define the behaviour of the state in response to particular actions using reducer functions.\n\nTo create a slice to manage our ToDo application, create a new file named src/features/todo/todoSlice.js and add the following code.\n\nimport { createSlice } from \"@reduxjs/toolkit\";\n\nconst initialState = {\n  tasks: [],\n};\n\nconst todoSlice = createSlice({\n  name: \"todo\",\n  initialState,\n  reducers: {\n    addTodo: (state, action) =\u003e {\n      state.tasks.push({ id: Date.now(), text: action.payload });\n    },\n    deleteTodo: (state, action) =\u003e {\n      state.tasks = state.tasks.filter((task) =\u003e task.id !== action.payload);\n    },\n  },\n});\n\nexport const { addTodo, deleteTodo } = todoSlice.actions;\n\nexport default todoSlice.reducer;\nThe above code defines a slice named todoSlice, with an initialState object that contains an empty array of tasks.\n\nThe reducers object defines two reducer functions: addTask and deleteTask. addTask pushes a new task object into the tasks array, and deleteTask removes a task from the tasks array based on its id property.\n\nThe createSlice function automatically generates action creators and action types based on the names of the reducer functions you provide. So you don't have to define the action creators yourself manually.\n\nThe export statement exports the generated action creators, which can be used in other parts of your app to dispatch actions to the slice.\n\nAnd finally, the todoSlice.reducer function handles all actions automatically generated based on the reducer objects provided to the createSlice function. By exporting it as the default, you can combine it with other reducers in your application to create a complete Redux store.\n\nHow to set up Redux Store\nCreating a Redux store is much simpler with Redux Toolkit.\n\nThe most basic way to create a store is to use the configureStore() function, which automatically generates a root reducer for you by combining all the reducers defined in your application.\n\nTo create a store for the application, add a file named src/store.js and add the following code:\n\nimport { configureStore } from \"@reduxjs/toolkit\";\nimport todoReducer from \"./features/todo/todoSlice\";\n\nconst store = configureStore({\n  reducer: {\n    todo: todoReducer,\n  },\n});\n\nexport default store;\nIn this example, we first import the configureStore function from the @reduxjs/toolkit package, and the  todoReducer function from a separate file.\n\nThen, we create a store object by calling configureStore and passing it an object with a reducer property. The reducer property is an object that maps reducer slice names to their corresponding reducer functions. In this case, we have one reducer slice called todo, and its corresponding reducer function is todoReducer.\n\nFinally, we export the store object so that it can be imported and used in other parts of the application.\n\nHow to provide the Redux store to React\nTo make your Redux store available to the React components in your application, import the Provider component from the react-redux library and wrap your root component (usually \u003cApp\u003e) with it.\n\nThe Provider component takes in the store as a prop and passes it down to all the child components that need access to it.\n\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.jsx\";\nimport \"./index.css\";\n\nimport store from \"./store.js\";\nimport { Provider } from \"react-redux\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003cReact.StrictMode\u003e\n    \u003cProvider store={store}\u003e\n      \u003cApp /\u003e\n    \u003c/Provider\u003e\n  \u003c/React.StrictMode\u003e\n);\nCreate components\nYou can now create React components such as Task.jsx and TaskList.jsx that use the useSelector hook to access the current state from the store. Similarly, you can use the useDispatch hook to dispatch actions to update the store, just as you did in plain Redux.\n\nYou should now have the same app as before with a few updates from Redux Toolkit and a lot less code to maintain.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineshkumar-mb%2Fredux1-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdineshkumar-mb%2Fredux1-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineshkumar-mb%2Fredux1-task/lists"}