Redux 使用

安装

需要安装两个

react-redux 中间件 链接Redux和React组件

reduxjs/toolkit 工具包(RTK)

npm i @reduxjs/toolkit

npm i react-redux

            获取状态
      ------------------>
Redux     react-redux      React组件
      <------------------
            更新状态

创建文件

---src
     ---store
        index.js
     ---modules
        counterStore.js
        channeStore.js

配置

1.Redux store 配置

1. 配置counterStore模版
2. 配置根store并组合counterStrore模版

2.React组件

1. 注入store(react-redux)
2. 使用store中的数据
3. 修改store中的数据

创建

1.createSliced

使用React Toolkit 创建 counterStore

counterStore.js

import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
  name: "counter",
  //   初始化state
  initialState: {
    count: 0,
  },
  //   修改状态的方法 ， 同步方法
  reducers: {
    inscrement(state) {
      state.count++;
    },
    decrment(state) {
      state.count--;
    },
  },
});

// 结构出来 actionCreater 函数
const { inscrement, decrment } = counterStore.actions;

// 获取reducer
const reducer = counterStore.reducer;

// 按需导出 actionCreater
export { inscrement, decrment };

// 默认导出reducer
export default reducer;

2.configureStore

store—>index.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

使用

1.Provider

App.js

import { Provider } from "react-redux";
import { ComA } from "./components/comA";
import store from "./store";

function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <ComA />
      </Provider>
    </div>
  );
}

export default App;

2.useSelector, useDispatch

ComA.js

import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
// 导入actionsCreater
import { decrment, inscrement } from "../store/modules/counterStore";
export const ComA = () => {
  const dispatch = useDispatch();
  const { count } = useSelector((state) => state.counter);
  return (
    <div>
      <button
        onClick={() => {
          dispatch(inscrement());
        }}
      >
        加
      </button>
      {count}
      <button
        onClick={() => {
          dispatch(decrment());
        }}
      >
        减
      </button>
    </div>
  );
};

提交action传参实现需求

在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上

  reducers: {
    inscrement(state) {
      state.count++;
    },
    decrment(state) {
      state.count--;
    },
    addToNum(state, action) {
      state.count += action.payload;
    },
  },

action.payload 是固定属性，用于接收参数

异步状态管理

1. 创建store的写法保持不变，配置好同步修改状态的方法
2. 单独封装一个函数，在函数内部return一个新函数，在新函数中
   2.1. 封装异步请求获取数据
   2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
3. 组件中dispatch的写法保持不变