react + redux 状态管理操纵

1 概念

Redux 是一个全局状态管理的 JS 库

2 Redux 安装

在react中利用redux，官方要求安装两个其他插件：Redux Toolkit 和 react-redux

• Redux Toolkit：官方保举编写redux逻辑的方式，简化誊写方式
  
• react-redux：用来毗连 redux 和 react 组件的中央件
  

通过下令：

1. npm i @reduxjs/toolkit react-redux

复制代码

3 创建子模块并导入

创建如下目次结构

counterStore.js 代码如下：

1. import { createSlice } from "@reduxjs/toolkit";
3. const counterStore = createSlice({
4.     name: 'counter',
5.     // 初始化state
6.     initialState: {
7.         count: 0
8.     },
9.     // 修改状态的方法 （同步方法）
10.     reducers: {
11.         increment(state) {
12.             state.count++
13.         },
14.         decrement(state) {
15.             state.count--
16.         }
17.     }
18. })
20. // 解构出来action函数
21. const { increment, decrement } = counterStore.actions
22. // 获取reducer
23. const reducer = counterStore.reducer
25. // 导出actions
26. export { increment, decrement }
27. // 默认导出reducer
28. export default reducer

复制代码

此中，我们界说了数据：count
以及两个 action：increment / decrement，后续会通过 dispatch 来触发 action 修改数据
   react 只有一种方式可以或许修改数据，就是 action，我们须要用 dispatch 提交 action，来修改数据
  然后再将子模块 counterStore.js 引入
index.js 代码如下：

1. import { configureStore } from '@reduxjs/toolkit'
2. import counter from './modules/counterStore'
4. // 导入子模块reducer
5. export default configureStore({
6.   reducer: {
7.     counter
8.   }
9. })

复制代码

4 中央件为 react 注入 store

react-redux 负责把 react 和 redux 毗连起来，内置 Provider 组件 通过 store 参数把创建好的 store 实例注入到应用中，毗连正式创建
通过导入 store 和 Provider 后
利用 Provider 将 App 包裹起来

1. import store from "./store";
2. import { Provider } from "react-redux";
4. const root = ReactDOM.createRoot(document.getElementById('root'));
5. root.render(
6.   <React.StrictMode>
7.     <Provider store={store}>
8.       <App />
9.     </Provider>
10.   </React.StrictMode>
11. );

复制代码

5 在组件中利用 store 数据

须要用到一个钩子函数 useSelector()，他的作用是把 store 的数据映射到组件中

1. import './App.css';
2. import { useSelector } from "react-redux";
4. function App() {
5.   // 获得 count 数据
6.   const { count } = useSelector(state => state.counter)
7.   return (
8.     <div className="App">
9.       {count}
10.     </div>
11.   );
12. }
14. export default App;

复制代码

利用 {count} 语法，界面中会展示 count 初始值
6 修改 store 数据

须要别的一个 hook 函数 userDispatch，它的作用是天生提交 action 对象的 dispatch 函数

   react 只有一种方式可以或许修改数据，就是 action，我们须要用 dispatch 提交 action，来修改数据

1. import './App.css';
2. import { useDispatch, useSelector } from "react-redux";
3. // 导入action
4. import { increment, decrement } from './store/modules/counterStore.js'
6. function App() {
7.   // 获得 count 数据
8.   const { count } = useSelector(state => state.counter)
9.   // 通过 dispatch 提交action 修改数据
10.   const dispatch = useDispatch()
12.   return (
13.     <div className="App">
14.       <button onClick={() => dispatch(decrement())}>-</button>
15.       {count}
16.       <button onClick={() => dispatch(increment())}>+</button>
17.     </div>
18.   );
19. }
21. export default App;

复制代码

7 提交 action 传参

在调用 action 时，参数会被通报到 action 对象的 payload 属性上

1. import './App.css';
2. import { useDispatch, useSelector } from "react-redux";
3. // 导入action
4. import { increment, decrement, addToNum } from './store/modules/counterStore.js'
6. function App() {
7.   // 获得 count 数据
8.   const { count } = useSelector(state => state.counter)
9.   // dispatch 提交action 修改数据
10.   const dispatch = useDispatch()
12.   return (
13.     <div className="App">
14.       <button onClick={() => dispatch(decrement())}>-</button>
15.       {count}
16.       <button onClick={() => dispatch(increment())}>+</button>
17.       <button onClick={() => dispatch(addToNum(10))}>+10</button>
18.     </div>
19.   );
20. }
22. export default App;

复制代码

1. import { createSlice } from "@reduxjs/toolkit";
3. const counterStore = createSlice({
4.     name: 'counter',
5.     // 初始化state
6.     initialState: {
7.         count: 0
8.     },
9.     // 修改状态的方法 （同步方法）
10.     reducers: {
11.         increment(state) {
12.             state.count++
13.         },
14.         decrement(state) {
15.             state.count--
16.         },
17.         addToNum(state, action) {
18.             state.count += action.payload
19.         }
20.     }
21. })
23. // 解构出来action函数
24. const { increment, decrement, addToNum } = counterStore.actions
25. // 获取reducer
26. const reducer = counterStore.reducer
28. // 导出actions
29. export { increment, decrement, addToNum }
30. // 默认导出reducer
31. export default reducer

复制代码

8 异步状态操纵

• 创建 store 的 state 和 action 稳固
  
• 在子模块中单独封装一个函数，新函数中异步哀求拿到数据，并利用 dispatch 触发 action
  
  
  
  创建新的 store 模块
  store/modules/channelStore.js 代码如下：
  

1. import { createSlice } from "@reduxjs/toolkit";
3. const channelStore = createSlice({
4.     name: 'channel',
5.     // 初始化state
6.     initialState: {
7.         channel: [{id: 50}, {id: 100}]
8.     },
9.     // 修改状态的方法 （同步方法）
10.     reducers: {
11.         setChannels(state, action) {
12.             state.channel = action.payload
13.         }
14.     }
15. })
17. // 解构出来action函数
18. const { setChannels } = channelStore.actions
19. // 获取reducer
20. const reducer = channelStore.reducer
22. // 异步请求
23. const fetchChannList = () => {
24.     return async (dispatch) => {
25.         setTimeout(() => {
26.             dispatch(setChannels([{id: 50}, {id: 100}, {id: 150}, {id: 200}]))
27.         })  // 模拟产生异步请求
28.         console.log('aaa')
29.     }
30. }
32. // 导出异步方法
33. export { fetchChannList }
34. // 默认导出reducer
35. export default reducer

复制代码

App.js 代码如下：

1. import './App.css';
2. import { useEffect } from 'react';
3. import { useDispatch, useSelector } from "react-redux";
4. // 导入action
5. import { increment, decrement, addToNum } from './store/modules/counterStore.js'
7. import { fetchChannList } from './store/modules/channelStore.js'
9. function App() {
10.   // 获得 state 数据
11.   const { count } = useSelector(state => state.counter)
12.   const { channel } = useSelector(state => state.channel)
14.   // dispatch 提交action 修改数据
15.   const dispatch = useDispatch()
17.   // 使用useEffect触发异步请求
18.   useEffect(() => {
19.     dispatch(fetchChannList())
20.   }, [dispatch])
22.   return (
23.     <div className="App">
24.       <button onClick={() => dispatch(decrement())}>-</button>
25.       {count}
26.       <button onClick={() => dispatch(increment())}>+</button>
27.       <button onClick={() => dispatch(addToNum(10))}>+10</button>
29.       <ul>
30.         {channel.map(item => <li key={item.id}>{item.id}</li>)}
31.       </ul>
32.     </div>
33.   );
34. }
36. export default App;

复制代码

9 redux 调试工具

谷歌下载：redux devtools

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金