第57节——切片

一、什么是切片

在 Redux 中，一个 state tree 是由多个 reducer 组成的，每个 reducer 负责管理一个 state 的一部分，这个概念称为“切片”（slice）。

例如，一个电子商务应用程序可能有一个购物车的 state，一个用户信息的 state，以及一个商品列表的 state。每个 state 都可以由一个 reducer 管理，这些 reducer 可以通过 combineReducers 函数组合在一起，形成一个完整的 state tree。其中，每个 reducer 管理的部分 state 就是一个切片。

使用切片的好处在于，每个 reducer 只需要关心自己管理的部分 state，而不需要关心整个 state tree 的结构。这样可以使 reducer 的代码更加清晰和易于维护。此外，切片还可以让我们更加方便地组织 action creators 和 selectors，从而使代码结构更加清晰

二、什么是createSlice

createSlice是Redux Toolkit中提供的一个用于快速创建Redux reducer的函数。它基于Redux reducer的标准结构，使得创建和更新Redux state更加方便、简洁。使用createSlice函数创建的slice包含了一个Redux reducer、一组action creators和对应的action types。

三、createSlice解决了什么问题

createSlice 解决了传统 Redux 应用中需要手动编写 reducer 和 action creators 的问题，简化了 Redux 应用程序的开发流程，提高了代码的可读性和可维护性。

在传统的 Redux 应用程序中，我们需要手动编写 reducer 函数来处理每个 action type，然后将它们组合成一个大的 rootReducer 函数。这样的代码结构往往比较冗长和繁琐，同时也容易出错。而 createSlice 的出现，让我们可以通过提供一个包含 reducer 和 action creators 的对象来自动生成相应的 reducer 函数和 action creators，从而避免了手动编写 reducer 的过程，使得开发者更加专注于业务逻辑的实现。

四、createSlice的优点

1、约定优于配置

createSlice 使用一些约定俗成的规则来生成 reducer 和 action creators，例如使用 Immer 库来进行 immutable state 的更新，这样可以避免在编写 reducer 函数时出现一些常见的错误。

2、自动生成 action type

createSlice 会自动根据 slice 的名称和 reducer 的名称生成相应的 action type，这样就避免了手动编写 action type 的过程，使得代码更加规范化和易于维护。

3、简化异步操

createSlice 提供了一个 createAsyncThunk 函数，用于简化异步操作的编写流程，让开发者更加专注于业务逻辑的实现

五、参数介绍

import { createSlice } from '@reduxjs/toolkit'

/**
 * createSlice 返回当前切片模块
 * 一个对象
 */
const useSlice = createSlice({
  // 切片名
  name: 'sliceName',
  // 初始状态
  initialState: {

  },
  /**
   * reducer模块
   * 这里并不能进行异步操作
   */
  reducers: {
    // 里面直接跟方法
    reducerName(state, action) {
      // handle the action
      return state
    }
  },
  /**
   * 用于处理其他的 action type。
   * 这些 reducer 函数也接收一个名为 state 的参数和一个名为 action 的参数。
   * 注意，这些 reducer 函数默认没有使用 Immer 库进行 immutable state 的更新
     
   */
  extraReducers: {
    // handle extra reducers
  }
})

//  导出相关的方法，页面可以直接调用
export const { reducerName } = sliceName.actions
// 当前的的状态
export default sliceName.reducer

extraReducers

这里我们单独介绍一下extraReducers。当我们使用createSlice创建Redux的Slice时，extraReducers可以用于添加额外的reducer。这些额外的reducer可以处理来自其他Slice的action或其他非标准的action类型

1、在actions模块中定义一个action

export const updateName = (name) => {
  return {
    type: 'updateName',
    name
  }
}

2、在切片中引入

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

/**
 * createSlice 返回当前切片模块
 * 一个对象
 */
const userSlice = createSlice({
  // 切片名
  name: "user",
  // 初始状态
  initialState: {
    age: 1,
    status: "",
    name: '张三'
  },
  extraReducers: (builder) => {
    builder
      .addCase('updateName', (state, action) => {
        console.log(state, action, '当前的动作')
        state.name = '王五'
      })
  },
});

// 当前的的状态
export default userSlice.reducer;

六、简单例子实现age++

1、创建user模块

import { createSlice } from '@reduxjs/toolkit'

/**
 * createSlice 返回当前切片模块
 * 一个对象
 */
const userSlice = createSlice({
  // 切片名
  name: 'user',
  // 初始状态
  initialState: {
    age: 1
  },
  /**
   * reducer模块
   * 这里并不能进行异步操作
   */
  reducers: {
    // 里面直接跟方法
    addNum(state, action) {
      return {...state, age: state.age + 1}
    }
  },
})

//  导出相关的方法，页面可以直接调用
export const { addNum } = userSlice.actions
// 当前的的状态
export default userSlice.reducer

2、页面中调用

import React from "react";
import { useSelector, useDispatch } from "react-redux";
// import { increment, decrement } from "./store";

import { addNum } from "./slice/user";

function App() {
  const user = useSelector((state) => state.user);

  const dispatch = useDispatch();

  return (
    <div>
      {user.age}
      <button onClick={() => dispatch(addNum())}>age + 1</button>
    </div>
  );
}

export default App;