需要安装插件npm install reduxjs/toolkit然后创建store根目录用来做总的store1. store根目录用途集中管理整个应用的状态全局状态池。类比类似银行的“总行金库”统一存放所有数据。优势避免状态分散在组件中便于维护和调试。支持跨组件共享数据如用户登录状态。2. modules子目录用途按业务功能拆分状态模块分治思想。文件示例counterStore.js管理计数器状态如count值。channelStore.js管理频道列表数据如channels: []。优势模块化开发降低复杂度。团队协作时可按功能分配开发任务。首先在子模块中定义方法并且传出对应reducer以供生成storereducer由slice切片生成const reducer slice.reducer;slice切片由createSlice生成const Slice createSlice里面装填该模块的state和修改该模块state的方法createSlice传的参数为一个对象对象必须包含name定义切片的名称并且生成action类型的前缀initialState定义该切片的初始状态reducers包含全部reducer函数的对象import { createSlice } from reduxjs/toolkit; const counterStore createSlice({ name: counter, // 初始化state initialState: { count: 0, }, // 修改状态的方法 同步方法 支持直接修改 reducers: { increment(state) { state.count; }, decrement(state) { state.count--; }, }, }); // 解构出来actionCreater函数 const { increment, decrement } counterStore.actions; // 获取reducer const reducer counterStore.reducer; // 以按需导出的方式导出actionCreater export { increment, decrement }; // 以默认导出的方式导出reducer export default reducer;*在这些module子目录中的业务功能是先用slice来写然后把其业务功能如{ increment, decrement }导出然后还需要为上层的store根目录提供reducer来创建store最上层用到的还是store*然后在index.js中生成store传出首先必须先获取到configureStore方法这个是增强版本的creatStore// 第1行从Redux Toolkit导入核心API import { configureStore } from reduxjs/toolkit;完整代码import { configureStore } from reduxjs/toolkit; //导入子模块reducer因为默认导出就是reducer counterStore.reducer所以counterReducer知识命名 import counterReducer from ./modules/counterStore; const store configureStore({ reducer: { counter: counterReducer, }, }); //将创建好的 Store 实例导出供应用最上层如 main.jsx通过 Provider 注入到 React 组件树中。 export default store;那么就是说先对模块A进行命名、状态初始化、方法定义然后用createslice来创建他的slice实例然后调出slice实例中的reducer关键和action修改方法然后将模块A的reducer给到总的configureStore来创建总的store再后续接下来为React注入store后就可以使用了react-redux负责把Redux和React链接起来内置Provider组件通过store参数把创建好的store实例注入到应用中链接正式建立。在react项目层的index.js中进行绑定import { Provider } from react-redux; import store from ./store;使用provide组件将这个根组件进行包裹并且定义store {store}Provider store{store} App / /Provider完整index.js:import React from react; import ReactDOM from react-dom/client; import ./index.css; import App from ./App; import reportWebVitals from ./reportWebVitals; import { Provider } from react-redux; import store from ./store; const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode Provider store{store} App / /Provider /React.StrictMode ); // 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();那如何在React组件中使用store的数据需要用到一个钩子函数——useSelector可以把store中的数据映射到组件中import logo from ./logo.svg; import ./App.css; import { useDispatch, useSelector } from react-redux; function App() { //把store中的数据映射到组件中 const { count } useSelector((state) state.counter); return ( div classNameApp div{count}/div /div ); } export default App;那React组件如何修改store中的数据React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch它的作用是生成提交action对象的第三patch函数还需将原定义在各个模块中的方法导入到App.js中方便直接调用import logo from ./logo.svg; //将用于调用方法的useDispa导入 import { useDispatch, useSelector } from react-redux; //将修改方法导入进来 import { increment, decrement } from ./store/modules/counterStore; function App() { //把store中的数据映射到组件中 const { count } useSelector((state) state.counter); const dispatch useDispatch(); return ( div classNameApp button onClick{() dispatch(increment())}/button div{count}/div button onClick{() dispatch(decrement())}-/button /div ); } export default App总流程也就是说使用store的过程是先在总的index.js中使用provide宣告全局这个总的store然后包裹全局。再去到特定需要使用store的组件然后调用useSelect方法获取到对应的状态的值如果需要修改的话要把一开始定义状态模块的方法action一起导入到里面去然后使用usedispatch方法生成dispatch方法然后再dispatch里面调用对应的action的方法就可以实现对状态的操作了先对模块 A 使用createSlice进行命名、状态初始化、reducer 方法定义创建它的 slice 实例然后导出 slice 实例中的reducer核心和actions修改方法接着把模块 A 的reducer配置到configureStore中创建全局总 store在项目入口文件如 index.js中使用Provider组件包裹根组件并传入总 store实现 store 全局可用在需要使用状态的组件里用useSelector方法获取 store 中对应的状态值如果需要修改状态先导入该模块导出的actions再用useDispatch生成 dispatch 方法最后通过dispatch(对应action方法())实现状态修改。极简记忆版推荐createSlice生成 →reduceractionsconfigureStore整合所有 reducerProvider全局注入 store组件内useSelector取数据useDispatchactions改数据
redux Tookit的配置流程
需要安装插件npm install reduxjs/toolkit然后创建store根目录用来做总的store1. store根目录用途集中管理整个应用的状态全局状态池。类比类似银行的“总行金库”统一存放所有数据。优势避免状态分散在组件中便于维护和调试。支持跨组件共享数据如用户登录状态。2. modules子目录用途按业务功能拆分状态模块分治思想。文件示例counterStore.js管理计数器状态如count值。channelStore.js管理频道列表数据如channels: []。优势模块化开发降低复杂度。团队协作时可按功能分配开发任务。首先在子模块中定义方法并且传出对应reducer以供生成storereducer由slice切片生成const reducer slice.reducer;slice切片由createSlice生成const Slice createSlice里面装填该模块的state和修改该模块state的方法createSlice传的参数为一个对象对象必须包含name定义切片的名称并且生成action类型的前缀initialState定义该切片的初始状态reducers包含全部reducer函数的对象import { createSlice } from reduxjs/toolkit; const counterStore createSlice({ name: counter, // 初始化state initialState: { count: 0, }, // 修改状态的方法 同步方法 支持直接修改 reducers: { increment(state) { state.count; }, decrement(state) { state.count--; }, }, }); // 解构出来actionCreater函数 const { increment, decrement } counterStore.actions; // 获取reducer const reducer counterStore.reducer; // 以按需导出的方式导出actionCreater export { increment, decrement }; // 以默认导出的方式导出reducer export default reducer;*在这些module子目录中的业务功能是先用slice来写然后把其业务功能如{ increment, decrement }导出然后还需要为上层的store根目录提供reducer来创建store最上层用到的还是store*然后在index.js中生成store传出首先必须先获取到configureStore方法这个是增强版本的creatStore// 第1行从Redux Toolkit导入核心API import { configureStore } from reduxjs/toolkit;完整代码import { configureStore } from reduxjs/toolkit; //导入子模块reducer因为默认导出就是reducer counterStore.reducer所以counterReducer知识命名 import counterReducer from ./modules/counterStore; const store configureStore({ reducer: { counter: counterReducer, }, }); //将创建好的 Store 实例导出供应用最上层如 main.jsx通过 Provider 注入到 React 组件树中。 export default store;那么就是说先对模块A进行命名、状态初始化、方法定义然后用createslice来创建他的slice实例然后调出slice实例中的reducer关键和action修改方法然后将模块A的reducer给到总的configureStore来创建总的store再后续接下来为React注入store后就可以使用了react-redux负责把Redux和React链接起来内置Provider组件通过store参数把创建好的store实例注入到应用中链接正式建立。在react项目层的index.js中进行绑定import { Provider } from react-redux; import store from ./store;使用provide组件将这个根组件进行包裹并且定义store {store}Provider store{store} App / /Provider完整index.js:import React from react; import ReactDOM from react-dom/client; import ./index.css; import App from ./App; import reportWebVitals from ./reportWebVitals; import { Provider } from react-redux; import store from ./store; const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode Provider store{store} App / /Provider /React.StrictMode ); // 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();那如何在React组件中使用store的数据需要用到一个钩子函数——useSelector可以把store中的数据映射到组件中import logo from ./logo.svg; import ./App.css; import { useDispatch, useSelector } from react-redux; function App() { //把store中的数据映射到组件中 const { count } useSelector((state) state.counter); return ( div classNameApp div{count}/div /div ); } export default App;那React组件如何修改store中的数据React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch它的作用是生成提交action对象的第三patch函数还需将原定义在各个模块中的方法导入到App.js中方便直接调用import logo from ./logo.svg; //将用于调用方法的useDispa导入 import { useDispatch, useSelector } from react-redux; //将修改方法导入进来 import { increment, decrement } from ./store/modules/counterStore; function App() { //把store中的数据映射到组件中 const { count } useSelector((state) state.counter); const dispatch useDispatch(); return ( div classNameApp button onClick{() dispatch(increment())}/button div{count}/div button onClick{() dispatch(decrement())}-/button /div ); } export default App总流程也就是说使用store的过程是先在总的index.js中使用provide宣告全局这个总的store然后包裹全局。再去到特定需要使用store的组件然后调用useSelect方法获取到对应的状态的值如果需要修改的话要把一开始定义状态模块的方法action一起导入到里面去然后使用usedispatch方法生成dispatch方法然后再dispatch里面调用对应的action的方法就可以实现对状态的操作了先对模块 A 使用createSlice进行命名、状态初始化、reducer 方法定义创建它的 slice 实例然后导出 slice 实例中的reducer核心和actions修改方法接着把模块 A 的reducer配置到configureStore中创建全局总 store在项目入口文件如 index.js中使用Provider组件包裹根组件并传入总 store实现 store 全局可用在需要使用状态的组件里用useSelector方法获取 store 中对应的状态值如果需要修改状态先导入该模块导出的actions再用useDispatch生成 dispatch 方法最后通过dispatch(对应action方法())实现状态修改。极简记忆版推荐createSlice生成 →reduceractionsconfigureStore整合所有 reducerProvider全局注入 store组件内useSelector取数据useDispatchactions改数据
