React之Redux-Toolkit(使用)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

redux-Toolkit是Redux官方推出的一个库,便于更灵活的使用Redux
Redux Toolkit 官网地址

一、安装

使用 yarn 安装

yarn add @reduxjs/toolkit react-redux

或者使用 npm 安装

npm install @reduxjs/toolkit react-redux

二、 使用

1. 创建 store

在src目录下创建store文件夹，并创建index.js文件

// 当前文件: src/store/index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './methods/counterSlice'

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

2. 创建 slice

使用createSlice方法创建一个slice
重要属性:

• name: 命名空间，可以自动的把每一个action进行独立，解决了action的type出现同名的文件。
• initialState: state数据的初始化
• reducers： 定义方法

对于以下代码: initialState 对state进行初始化、incrementByAmount中使用对象的解构,直接传入了{payload}
Redux Toolkit允许我们在reducers中直接写改变state的逻辑.
由于使用了Immer库,所以并没有真的改变state
而是检测到“草稿state”的更改并根据这些更改生成一个全新的不可变state

// 当前文件 src/store/methods/createSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state,{payload}) => {
      console.log(payload);
      state.value += payload;
    },
  },
})

// reducer方法的每一个case都会生成一个Action
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

3. 在项目中使用

// 当前文件: src/components/counter.js
import {Button as MaterialButton} from "@material-ui/core";
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement,incrementByAmount } from '../store/methods/counterSlice'

export function Counter({number=1}) {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(incrementByAmount(number))}
        >
          +{number}
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -1
        </button>
      </div>
    </div>
  )
}

4. App文件中使用

这里是使用counter组件,number以props的形式传递，每次点击按钮store中的counter会增加对应的值

import React from 'react'
import { Counter } from './components/counter';

export default function App() {
  return (
    <div>
      <Counter number={2} />
      <hr/>
      <Counter number={4} />
      <hr/>
      <Counter number={10} />
    </div>
  )
}

效果如下(css没有给出)：