diff --git a/redux/toolkit/package-lock.json b/redux/toolkit/package-lock.json index c4e8ae9fb..cca240811 100644 --- a/redux/toolkit/package-lock.json +++ b/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", diff --git a/redux/toolkit/package.json b/redux/toolkit/package.json index 864d0c87f..67c3d36f3 100644 --- a/redux/toolkit/package.json +++ b/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", diff --git a/redux/toolkit/src/index.js b/redux/toolkit/src/index.js index d563c0fb1..3d84527dd 100644 --- a/redux/toolkit/src/index.js +++ b/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( - + + + ); diff --git a/redux/toolkit/src/store/index.js b/redux/toolkit/src/store/index.js new file mode 100644 index 000000000..99e002687 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/redux/toolkit/src/store/todosReducer.js b/redux/toolkit/src/store/todosReducer.js new file mode 100644 index 000000000..3686e0a81 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/redux/toolkit/src/store/visibilityFilterReducer.js b/redux/toolkit/src/store/visibilityFilterReducer.js new file mode 100644 index 000000000..d93f34cf3 --- /dev/null +++ b/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 \ No newline at end of file