Redux使用教程

Redux使用教程

一、安装依赖

安装ReduxToolkit、react-redux，命令行输入

npm i @reduxjs/toolkit react-redux

二、创建目录结构

创建标准的store目录结构，当然这一步不是必须的

​ ① 在src下创建store文件夹
​ ② 在store文件夹中创建一个modules文件夹，用于存放多个子store模块
​ ③ 在store文件夹中创建一个index.js文件，为了组合modules中所有子模块，并导出store
目录结构：

 - src
       - index.js
       - modules
          - store1.js
          - store2.js
          - ...

如：

三、编写Redux配置

① 在modules目录下的子模块中编写业务store模块

​ 通过createSlice函数创建存储对象，在函数中传入一个存储的配置对象，name属性指定存储器名称，initialState属性指定初始化数据，reducer属性中指定修改数据的方法，最后需要将修改状态的方法导出，reducer导出

如：

//	store/modules/counterStore.js文件
import {createSlice} from "@reduxjs/toolkit";

//	创建存储对象
const counterStore = createSlice({
    //	指定存储器的名称
    name: 'counter',
    //  初始化状态数据
    initialState: {
        count: 0
    },
    //  修改数据的方法
    reducers: {
        //	自增
        increment(state) {
            state.count++
        },
        //	自减
        decrement(state) {
            state.count--
        },
        //	加上特定值，传来的参数需要通过第二个参数的.action属性获取
        addToNum(state, action) {
            state.count = state.count + action.payload
        }
    }
})

//  导出操作数据的行为函数
export const {increment, decrement, addToNum} = counterStore.actions
//  获取reducer函数
const counterReducer = counterStore.reducer
//	导出reducer
export default counterReducer

② 在store/index.js文件中将所有子模块store组合在一起并导出

​ 通过给configureStore函数传递一个配置对象，reducer属性指定存储器名字及对应的reducer，最后将函数返回的store对象导出即可

如：

import {configureStore} from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";
//	组合子模块的store
const store = configureStore({
    reducer: {
        //	存储器名：reducer
        counter: counterReducer
    }
})
export default store

③ 在src/index.js文件中给组件提供全局store

​ 用 <Provider store={导出的总store对象}> </Provider>包裹<App/>，

如：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
//	导入总store
import store from "./store";
import {Provider} from "react-redux";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    {/*	给<App/>组件提供全局store	*/}
    <Provider store={store}>
    	<App/>
    </Provider>
);

四、使用全局状态

① 读取状态数据

​ 通过useSelector函数传递进去一个函数作为参数，在该函数中指定要取出的存储器，返回值为存储器中的状态对象，通过状态对象可以获取到内部的值，并且这个值是响应式数据

如：

import {useSelector} from "react-redux";
export default function App() {
    //	取出counter存储器中的状态，并通过解构语法将count取出
	const {count} = useSelector(state => state.counter)
}

② 修改状态数据

​ 通过useDispatch()拿到dispatch函数，通过执行操作状态函数拿到action对象，将action对象通过dispatch(action)进行提交即可修改状态，并且在执行自定义操作函数时可以传递一个参数，这个参数会被定义的操作函数第二个参数对象的payload属性拿到

如：

import {useDispatch, useSelector} from "react-redux";
import {addToNum, increment} from "./store/modules/counterStore";

export default function App() {
  const {count} = useSelector(state => state.counter)
  //	获取dispatch函数
  const dispatch = useDispatch();
  function countIncrement() {
	  //	将操作状态函数返回的action对象交给dispatch函数进行状态提交
      dispatch(increment())
  }
  function add20() {
      //	20这个参数会被原始定义的addToNum的第二个参数的payload属性拿到
      dispatch(addToNum(20))
  }
  return (
      <div>
        <div>
          {count}
        </div>
        <button onClick={countIncrement}>+1</button>
        <button onClick={add20}>+20</button>
      </div>
  )
}

解释：这里使用的操作状态函数是被代理之后的，因此代理状态函数的参数会被传到原先自定义状态函数的第二个参数的payload上