Redux(第一种方案)

安装

npm i  react-redux @reduxjs/toolkit -S

4 步法则

(1) 创建切片

根目录下创建 store 文件夹，里面创建一个 index.js 文件，用来创建 store

在 store 文件夹下面创建 modules 文件夹，里面创建一个 user.js 文件，用来创建切片

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

const user = createSlice({
  name: "userslice",
  initialState: {
    name: "张三",
    age: 20,
    detail: {
      sex: "男",
      height: 180,
    },
  },
  reducers: {
    setAge: (state, { payload }) => {
      const result = { ...state };
      result.age += payload;
      console.log(result);
      return result;
    },
    setName: (state, { payload }) => {
      const result = { ...state };
      result.name = payload;
      return result;
    },
    setSex: (state, { payload }) => {
      const result = JSON.parse(JSON.stringify(state));
      console.log(result);
      result.detail.sex = payload;
      console.log(result);
      return result;
    },
    setHeight: (state, { payload }) => {
      const result = JSON.parse(JSON.stringify(state));
      result.detail.height = payload;
      return result;
    },
  },
});

export const { setAge, setName, setSex, setHeight } = user.actions;
export default user.reducer;

• 在 modules 文件夹，里面创建一个 goods.js 文件，用来创建切片

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

const Goods = createSlice({
  name: "Goods",
  initialState: {
    goodsname: "宝莲灯",
    goodssale: "1000",
  },
  reducers: {
    setGoodsName: (state, { payload }) => {
      const result = { ...state };
      result.goodsname = payload;
      return result;
    },
    setGoodssale: (state, { payload }) => {
      const result = { ...state };
      result.goodssale = payload;
      return result;
    },
  },
});

export const { setGoodsName, setGoodssale } = Goods.actions;
export default Goods.reducer;

(2) 创建 store

根目录下创建 store 文件夹，里面创建一个 index.js 文件，用来创建 store

引入模块

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./user";
import goodsSlice from "./goods";
const Store = configureStore({
  reducer: {
    user: userSlice,
    goods: goodsSlice,
  },
});

export default Store;

(3) 根组件使用

• main.jsx

import { Provider } from "react-redux";
import store from "./store/index.js";
<React>
  <Provider store={store}>
    <App />
  </Provider>
</React>;

(4) 组件使用

• 基础版

import {useSelector，useDispatch} from "react-redux"
 const Child = ()=>{
const user = useSelector((state)=>state.user)
const dispatch = useDispatch()
    return (
          <div>
               <h1>组件--{JSON.stringnify(user)}</h1>
                 <button onClick={()=>dispatch({type:"user-slice/setName",payload:1})}>改变年龄 </button>
        </div>
     )
 }

• 优雅的写法

import { useSelector, useDispatch } from "react-redux";

import { setAge, setName, setSex, setHeight } from "../store/modules/user";

function Base() {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();
  return (
    <div>
      <span>{user.name}</span>
      <span>{user.age}</span>
      <span>{user.detail.sex}</span>
      <span>{user.detail.height}</span>
      <button onClick={() => dispatch(setName("李四"))}>点击改变名字</button>
      <button onClick={() => dispatch(setAge(1))}>点击改变年龄</button>
      <button onClick={() => dispatch(setSex("女"))}>点击改变性别</button>
      <button onClick={() => dispatch(setHeight(210))}>点击改变身高</button>
    </div>
  );
}

export default Base;