redux-toolkit学习笔记

          该文章是个人的redux-toolkit学习笔记，主要是redux-toolkit在项目中的使用方法。

一、创建仓库和读取仓库中的值 

1.安装redux-toolkit

> npm install @reduxjs/toolkit
> npm install react-redux

 2.创建仓库

        在src路径下新建仓库的路径store并新建store.js文件，并创建子仓库product（名字自拟），然后在store.js中引入product

//store.js
import { configureStore } from "@reduxjs/toolkit";
import product from "./product";//引入子仓库
//创建仓库
const store = configureStore({
  reducer: {
    product,//注册子仓库
  },
});
export default store;//导出仓库

// product.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "product", //子仓库的名字
  //子仓库的默认值
  initialState: {
    name: "jack",
    age: "18",
    addr: "广州",
  },
  reducers: {},
});

export default counterSlice.reducer; //导出子仓库

3.全局引用仓库

        在index.js文件中全局引用仓库

import { Provider } from "react-redux";//导入Provider
import store from "./store/store";//导入仓库

...
//全局引入
<Provider store={store}>
   <App />
</Provider>
...

4.读取仓库中的值

   

import React from "react";
import { useSelector } from "react-redux";//引入useSelector函数
export default function News1() {
  //通过useSelector函数读取product子仓库中的值(product可换为自定义的仓库名)
  let { name, age, addr } = useSelector((store) => store.product);

  return (
    <div>
      <h3>{name}</h3>
      <h3>{age}</h3>
      <h3>{addr}</h3>
    </div>
  );
}

输出结果如下

 二、改变仓库中的值

1.定义函数并导出

        

// product.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "product", //子仓库的名字
  //子仓库的默认值
  initialState: {
    name: "jack",
    age: "18",
    addr: "广州",
  },
  reducers: {
    //在reducers中定义函数，state为默认参数，value为调用函数时传递的参数
    changeName: (state, value) => {
       //state中的name变为传递过来的值
      state.name = value.payload;
    },
  },
});
export const { changeName } = counterSlice.actions;//导出函数
export default counterSlice.reducer; //导出子仓库

2.引入并调用函数

import React from "react";
import { useDispatch } from "react-redux";//引入useDispatch函数
import { changeName } from "../../store/product";//引入自定义的函数

export default function New2() {
  let dispatch = useDispatch();//通过useDispatch函数构造新的dispatch函数
  let changeName1 = () => {
    //dispatch函数调用时传递自定义的函数作为回调
    //自定义的函数传递值
    dispatch(changeName("rose"));
  };

  return (
    <div>
      <button onClick={changeName1}>改变</button>
    </div>
  );
}

改变前

 改变后