Redux

  1. 安装 redux 和 toolkit
npm i react-redux @reduxjs/toolkit
  1. 创建 store
    在 src 目录下创建 store 文件夹,并在 store 文件夹下创建 index.js 文件

  2. 在 store 下创建对应业务的 js 文件,来保存对应数据的状态,比如 user.js、goods.js 等

代码演示:

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

/** 创建一个user的切片 */
const userSlice = createSlice({
   
  /** 切片的名称 */
  name: "user-slice",
  /** 切片的初始状态(也就是初始数据) */
  initialState: {
   
    name: "curry",
    age: 18,
    gender: "male",
  },
  /** 操作状态的方法 */
  reducers: {
   
    // 修改名称的方法
    // 参数1:原始数据
    // 参数2:action,action有两个属性:action.type和action.payload
    // action.type:表示要执行的操作
    // action.payload:表示要传递的数据
    setName(state, action) {
   
      state.name = action.payload;
    },
    setGender(state, action) {
   
      state.gender = action.payload;
    },
    setAge(state, action) {
   
      state.age = action.payload;
    },
  },
});

export default userSlice;
  1. 在 index.js 中将各个切片合并
    代码演示:
import {
    configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值