44444

redux/toolkit/package-lock.json

@@ -48,6 +48,7 @@
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.3.1",
+        "react-redux": "^9.1.2",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
@@ -4536,6 +4537,11 @@
       "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.10.tgz",
@@ -15027,6 +15033,28 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17253,6 +17281,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",

redux/toolkit/package.json

@@ -43,6 +43,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
     "react-refresh": "^0.11.0",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",

redux/toolkit/src/index.js

@@ -2,12 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { Provider } from 'react-redux';
+import store from './store/index'
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
       <App />
+    </Provider>
   </React.StrictMode>
 );
 

redux/toolkit/src/store/index.js

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit'
+import todosReducer from './todosReducer'
+import visibilityFilterReducer from './visibilityFilterReducer'
+ 
+const store = configureStore({
+  reducer: {
+    todos: todosReducer,
+    filter: visibilityFilterReducer
+  }
+})
+ 
+export default store

redux/toolkit/src/store/todosReducer.js

@@ -0,0 +1,28 @@
+import { createSlice } from "@reduxjs/toolkit"
+ 
+let nextTodoId = 0
+const todosReducer = createSlice({
+  name: 'todos',
+  // 初始状态
+  initialState: {
+    todos:[]
+  },
+  // 修改数据的方法
+  reducers: {
+    addTodo(state,action){
+      state.todos.push({
+        text: action.payload,
+        id: nextTodoId++,
+        completed: false
+      })
+    },
+    toggleTodo(state, action) { 
+      const item = state.todos.find(item => item.id === action.payload)
+      item.completed = !item.completed
+    }
+  }
+})
+ 
+export const {addTodo, toggleTodo} =  todosReducer.actions
+ 
+export default todosReducer.reducer

redux/toolkit/src/store/visibilityFilterReducer.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+const filterReducer = createSlice({
+  name: 'filter',
+  // 初始状态
+  initialState: {
+    filter: []
+  },
+  // 修改数据的方法
+  reducers: {
+    setFilter(state,action) {
+      state.filter = action.payload
+    }
+  }
+})
+ 
+export const { setFilter } = filterReducer.actions
+ 
+export default filterReducer.reducer