Redux Toolkit

是什么

是一个基于redux封装的一个状态管理工具集，目的是简化redux开发流程。提供了一些选项来配置全局store，并通过尽可能地抽象Redux API来更精简地创建actions和reducers。

Redux Toolkit API的主要功能？

以下是Redux Took Kit使用的API函数，它是现有Redux API函数的抽象。这些函数并没有改变Redux的流程，只是以更易读和管理的方式简化了它们。

• configureStore：像从Redux中创建原始的createStore一样创建一个Redux store实例，但接受一个命名的选项对象并自动设置Redux DevTools扩展。
• createAction：接受一个Action类型字符串，并返回一个使用该类型的Action创建函数。
• createReducer：接受初始状态值和Action类型的查找表到reducer函数，并创建一个处理所有Action类型的reducer。
• createSlice：接受一个初始状态和一个带有reducer名称和函数的查找表，并自动生成action creator函数、action类型字符串和一个reducer函数。

您可以使用上述API简化Redux中的样板代码，尤其是使用**createAction**和**createReducer**方法。然而，这可以使用createSlice进一步简化，它可以自动生成action creator和reducer函数。

使用

下载安装

$ yarn add @reduxjs/toolkit react-redux

配置store

// 配置redux-toolkit-store
import { configureStore } from "@reduxjs/toolkit";
import cartReducer from './modules/cart';
import todoReducer from './modules/todoList';
export const store = configureStore({
  // reducer 类似vuex的modules
  reducer: {
    //小的reducer（其实就是模块数据）
    //key(数据切片的名称或者命名空间):value（管理该数据切片的reducer）
    cart: cartReducer,
    todo: todoReducer
  }
})

//配置购物车对应的reducer 模块数据
import { createSlice } from '@reduxjs/toolkit';
import cartApi from '../../apis/shopcart';
const cartSlice = createSlice({
  //当前模块type的命名空间
  name: 'cart',
  // 当前模块的数据
  initialState: {
    list: []
  },
  // 修改模块数据的方法
  reducers: {
    /* 
    这里的函数名称就是action type 只是再外面使用的使用需要加上命名空间
    例如：cart/delProduct
    dispatch({
        type:"cart/delProduct",
        payload:1
    })
    修改当前模块数据的逻辑（必须是同步的）
    */
    setList (state, action) {
      state.list = action.payload;
    }
  }
})
// console.log('cartSlice', cartSlice);
//actions对象里面保存的都是action creator 即执行过后返回值是一个action对象的函数
export const { changeNum, delItem, setList } = cartSlice.actions;
/* 异步请求方法 */
// 获取购物车数据
export const getCartDataAsync = () => async (dispatch) => {
  const res = await cartApi.getCartData();
  // console.log(res);
  dispatch(setList(res.data));
}
export default cartSlice.reducer;

组件中使用

在组件树的顶层注入store数据

import React from 'react'
import store from '@/store/index';
import {Provider} from 'react-redux';
export default function App(){
return(
  <Provider store={store}>
    ...你的其他组件，一般是根组件
  </Provider>
  )
}

组件获取store数据修改

• 类组件可以通过connect
• 函数组件可以通过connect或者useSelector和 useDispatch

  import { useSelector, useDispatch } from 'reactredux';
  import { add, asyncAddAC } from '@/store/modules/counter';
  export default function Counter () {
  const count = useSelector(state => state.counter.c);
  const dispatch = useDispatch()
  return (
  <div>
    {count}
    <button onClick={() => dispatch(add(2))}>add</button>
    <button onClick={() => dispatch(asyncAddAC(3))}>async add</button>
  </div>
  )
  }

  ```javascript import React, { Component } from ‘react’ import { connect } from ‘react-redux’ import * as cartActions from ‘../../../reduxToolKitStore/modules/cart’

class Cart extends Component { componentDidMount () { this.props.dispatch(cartActions.getCartDataAsync()); } changeNum = (_id, type) => { this.props.dispatch(cartActions.changeNum({ _id, type })) } // 计算总价 get total () { let total = 0; this.props.list.forEach(item => { total += item.num item.price; }) return total; } render () { // console.log(this.props); return (

<a name="Wv6Gl"></a>
###  配置中间件
<a name="q4174"></a>
#### 下载中间件
<a name="iMKvb"></a>
#### 配置
```javascript
import { configureStore } from '@reduxjs/toolkit'
import logger from 'redux-logger';
//配置store
import counter from './modules/counter';
import cart from './modules/cart';
const store = configureStore({
  //reducer模块 统一在这里配置，类似vuex中的modules
  reducer: {
    //key(该数据切片的名称):value（管理该数据切片的reducer）
    counter,
    cart,
  },
  //配置中间件
  middleware:
    (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
})
export default store;