园龄：3年4个月粉丝：6 关注：0

redux toolkit使用

1. 是什么 what

Redux Toolkit包旨在成为编写Redux逻辑的标准方式。它最初的创建是为了帮助解决关于 Redux 的三个常见问题：

配置 Redux 存储太复杂了
我必须添加很多包才能让 Redux 做任何有用的事情
Redux 需要太多样板代码

2. 环境安装

注意不要拼错 @reduxjs/toolkit
npm install @reduxjs/toolkit react-redux
yarn add @reduxjs/toolkit react-redux

react-redux 也需要单独安装

3.创建store

store/index.js

configureStore替代 createStore
这里 reduer直接合并成一个唯一的根root了
原有的combineReducers这个合并函数就用不到了
注意自己配置的 reducer的 key值和对应的value值

import { configureStore } from '@reduxjs/toolkit'
import countReducer from './modules/counter'

// 创建store 导出
export const store = configureStore({
  reducer: {
    counter: countReducer
  },
})

4.createSlice reducer编写

1. 创建slice
使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions，可以实现模块化的封装。
所有的相关操作都独立在一个文件中完成。

2. 关键属性:

name
命名空间，可以自动的把每一个action进行独立，解决了action的type出现同名的文件。在使用的时候默认会把使用name/actionName

initialState
state数据的初始值
3.reducers
定义的action。由于内置了immutable插件，可以直接使用赋值的方式进行数据的改变，不需要每一次都返回一个新的state数据。

import { createSlice } from '@reduxjs/toolkit'

// 创建slice使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions，可以实现模块化的封装。
// 所有的相关操作都独立在一个文件中完成。
export const counter = createSlice({
  // 命名空间 作为action type的前缀
  name: 'counter',
  // 初始状态(相当于state)
  initialState: {
    value: 0
  },
  // 1，定义了reducer更新状态函数  2，组件中dispatch使用的action函数
  // 由于内置了immutable插件，可以直接使用赋值的方式进行数据的改变，不需要每一次都返回一个新的state数据。
  // 参数1: 当前slice的state数据
  // 参数2: 对象{type:"",payload:传参}
  reducers: {
    add(state, action) {
      state.value += 1
      console.log(action)
    },
    minus(state, action) {
      state.value -= 1
    },
    ride(state, action) {
      state.value = state.value * 2
      console.log('222')
    }
  },
})


// 导出action函数
export const { add, minus, ride } = counter.actions

// 定义异步action
export const rideAsyc = (payload) => {
  return async (dispatch, getState) => {
    setTimeout(() => {
      dispatch(ride())
    }, 2000)
  }
}

// 导出reducer
export default counter.reducer

3. 导出

counterSlice.actions 导出所有的修改函数方便页面使用
counterSlice.reducer 导出reducer在 store里面使用

4. 具体reducer 函数的参数

参数1: 当前slice的state数据
参数2: 对象

type:counterSpace/decrement
type就是之前的 actions用switc/case来匹配很麻烦,现在简洁了
type构成 slice的 name命名空间/具体的修改函数

payload 要和传的时候保持一致

5.根组件配置 store

入口index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { store } from './store/index'
import { Provider } from 'react-redux'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

6.页面使用

6.1.useDispatch()

const dispatch = useDispatch(); 修改函数
payload传参和 reducer保持一致
引用类型的修改注意

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
// 导入action
import { add, minus, rideAsyc } from '../../store/modules/counter'

export default function Counts() {
  // 返回指定的state
  const { value } = useSelector((state) => state.counter)
  const dispatch = useDispatch()
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => {
        dispatch(add())
      }}>+</button>
      <button onClick={() => {
        dispatch(minus())
      }}>-</button>
      <button onClick={() => {
        dispatch(rideAsyc())
      }}>*2</button>
    </div>
  )
}