use @redux/toolkit

README.md

@@ -1,5 +1,7 @@
 # React + Redux list of TODOs
 
+> ❗ Read the lesson theory before solving this task
+
 You are given an `app` folder with already implemented `store` and `hooks`.
 Use them to implement [Dynamic list of TODOs](https://github.com/mate-academy/react_dynamic-list-of-todos#react-dynamic-list-of-todos)
 using the Redux. It should look and work identically, so use the same markup.

package.json

@@ -8,16 +8,14 @@
   "dependencies": {
     "@cypress/react18": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.2.0",
+    "@reduxjs/toolkit": "^2.2.5",
     "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^5.0.1",
-    "redux": "^4.2.1",
-    "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.4.2"
+    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

src/App.tsx

@@ -1,34 +1,26 @@
-/* eslint-disable max-len */
-import React from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import { Loader, TodoFilter, TodoList, TodoModal } from './components';
 
-import { TodoList } from './components/TodoList';
-import { TodoFilter } from './components/TodoFilter';
-import { TodoModal } from './components/TodoModal';
-import { Loader } from './components/Loader';
+export const App = () => (
+  <>
+    <div className="section">
+      <div className="container">
+        <div className="box">
+          <h1 className="title">Todos:</h1>
 
-export const App: React.FC = () => {
-  return (
-    <>
-      <div className="section">
-        <div className="container">
-          <div className="box">
-            <h1 className="title">Todos:</h1>
-
-            <div className="block">
-              <TodoFilter />
-            </div>
+          <div className="block">
+            <TodoFilter />
+          </div>
 
-            <div className="block">
-              <Loader />
-              <TodoList />
-            </div>
+          <div className="block">
+            <Loader />
+            <TodoList />
           </div>
         </div>
       </div>
+    </div>
 
-      <TodoModal />
-    </>
-  );
-};
+    <TodoModal />
+  </>
+);

src/app/store.ts

@@ -1,22 +1,10 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension';
-import thunk from 'redux-thunk';
+import { combineSlices, configureStore } from '@reduxjs/toolkit';
 
-import currentTodoReducer from '../features/currentTodo';
-import filterReducer from '../features/filter';
-import todosReducer from '../features/todos';
+const rootReducer = combineSlices();
 
-const rootReducer = combineReducers({
-  currentTodo: currentTodoReducer,
-  filter: filterReducer,
-  todos: todosReducer,
+export const store = configureStore({
+  reducer: rootReducer,
 });
 
-// The `store` is passed to the Provider in `/src/index.tsx`
-export const store = createStore(
-  rootReducer,
-  composeWithDevTools(applyMiddleware(thunk)),
-);
-
-export type RootState = ReturnType<typeof store.getState>;
+export type RootState = ReturnType<typeof rootReducer>;
 export type AppDispatch = typeof store.dispatch;

src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Loader';
+export * from './TodoList';
+export * from './TodoFilter';
+export * from './TodoModal';

src/features/currentTodo.ts

@@ -1,35 +1,10 @@
+import { createSlice } from '@reduxjs/toolkit';
 import { Todo } from '../types/Todo';
 
-// we use string literal as a type to avoid mistype in future
-type RemoveTodoAction = { type: 'currentTodo/REMOVE' };
+const initialState = null as Todo | null;
 
-// payload is a typical name for an action data
-type SetTodoAction = {
-  type: 'currentTodo/SET';
-  payload: Todo;
-};
-
-// Action creator return type protect us from a mistype
-const removeTodo = (): RemoveTodoAction => ({ type: 'currentTodo/REMOVE' });
-
-const setTodo = (todo: Todo): SetTodoAction => ({
-  type: 'currentTodo/SET',
-  payload: todo,
+export const currentTodoSlice = createSlice({
+  name: 'currentTodo',
+  initialState,
+  reducers: {},
 });
-
-// These actions will be used in the application
-export const actions = { setTodo, removeTodo };
-
-type State = Todo | null;
-type Action = SetTodoAction | RemoveTodoAction;
-
-const currentTodoReducer = (state: State = null, action: Action): State => {
-  switch (action.type) {
-    // Implement all actions here
-
-    default:
-      return state;
-  }
-};
-
-export default currentTodoReducer;

src/features/filter.ts

@@ -1,12 +1,12 @@
-export const actions = {
-  /* put action creators here */
-};
+import { createSlice } from '@reduxjs/toolkit';
 
-const filterReducer = () => {
-  return {
-    query: '',
-    status: 'all',
-  };
+const initialState = {
+  query: '',
+  status: 'all',
 };
 
-export default filterReducer;
+export const filterSlice = createSlice({
+  name: 'filter',
+  initialState,
+  reducers: {},
+});

src/features/todos.ts

@@ -1,9 +1,8 @@
+import { createSlice } from '@reduxjs/toolkit';
 import { Todo } from '../types/Todo';
 
-export const actions = {};
-
-const todosReducer = (): Todo[] => {
-  return [];
-};
-
-export default todosReducer;
+export const todosSlice = createSlice({
+  name: 'todos',
+  initialState: [] as Todo[],
+  reducers: {},
+});

src/index.tsx

@@ -5,17 +5,10 @@ import { HashRouter as Router } from 'react-router-dom';
 import { store } from './app/store';
 import { App } from './App';
 
-const container = document.getElementById('root') as HTMLElement;
-const root = createRoot(container);
-
-// Just a convenient component with all the wrappers for the `App`
-// The Router component (if you use it) should be placed inside the Provider
-const Root = () => (
+createRoot(document.getElementById('root') as HTMLElement).render(
   <Provider store={store}>
     <Router>
       <App />
     </Router>
-  </Provider>
+  </Provider>,
 );
-
-root.render(<Root />);