Redux 8 配置_其他编程

一、安装

二、配置

1.创建文件① src/app/store.js

2.创建文件② src/app/features/xxxx/xxxx.js

3.编辑文件 store.js

4.编辑文件 index.js

三、使用

1.新建文件src/pages/test/index.jsx

安装

npm i @reduxjs/tookit react-redux

配置

1.创建文件① `src/app/store.js`

a.随便你创建在哪 [ 个人开发的话你开心就好 ]

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

import counterreducer from "../features/counter/counterslice";
export default configurestore({
  reducer: counterreducer,
});

2.创建文件② `src/features/xxxx/xxxx.js`

a.默认值可以写在组件当中

b.个人喜欢分开写如果你不想这么写也可以在app文件下直接创建xxxx.js

c.异步处理函数需要利用使用高阶函数进行middleware的操作

d.同步方法直接在createslice当中的reducers写入即可

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

export const counterslice = createslice({
  name: "counter",
  initialstate: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    increamentbyamount: (state, action) => {
      console.log(state, action);
      state.value += action.payload;
    },
  },
});

// 默认值
export const initstate = (state) => state;

// reducer
export const { increment, decrement, increamentbyamount } =
  counterslice.actions;

// 异步处理函数
export const increamentasync = (value) => (dispatch) => {
  settimeout(() => {
    dispatch(increamentbyamount(value));
  }, 3000);
};

export default counterslice.reducer;

3.编辑文件 `index.js`

a.好了，基本上我们都已经配置好了，我们需要让react知道你配置了redux

b.找到你的根 [ 滑稽 ] 在app外层包一个react-redux的provider并设定好store

import {provider} from "react-redux"
import store from "./app/store"

···
root.render(
  <provider store={store}>
    <app/>
  </provider>
)

使用

1.新建文件`src/pages/test/index.jsx`

注①：这只是最简单的使用，有其他操作的可以自行更改

注②：useselector & usedispatch 在这里不过多介绍自行 see doc

import { usedispatch, useselector } from "react-redux";
// 引入方法
import {
  initstate,
  increment,
  decrement,
  increamentbyamount,
  increamentasync,
} from "./features/counter/counterslice";

function test() {
  // 获取全局状态 【 initstate 也可以写成 callback形式 (xxx)=>xxx 】
  const globle = useselector(initstate);
  // 实例化usedispatch
  const dispatch = usedispatch();

  // 解构cloble对象当中的value值
  const {value} = globle
  // 按钮onclick方法
  const operation = (type) => {
    switch (type) {
      case "add": // 全局同步 +1 
        dispatch(increment());
        break;
      case "sub": // 全局同步 -1
        dispatch(decrement());
        break;
      case "addnum": // 全局同步 +20
        dispatch(increamentbyamount(20));
        break;
      case "asyncadd": // 全局异步 +30
        dispatch(increamentasync(30));
        break;
      default:
        console.log("参数错误");
    }
  };
  return (
    <div classname="app">
      当前值：{value}
      <hr />
      <button onclick={() => operation("add")}>加</button>
      <button onclick={() => operation("sub")}>减</button>
      <button onclick={() => operation("addnum")}>加</button>
      <button onclick={() => operation("asyncadd")}>异步加</button>
    </div>
  );
}

export default test;