创建切片 redux - Javascript

在 Redux 中，我们使用切片（slices）来将应用程序状态进行拆分和组织管理。每个切片都包含一个 reducer，一些 action，并可能包含一些与 selectors 有关的代码。

创建一个新的切片

创建一个新的切片需要遵循一些规范，下面是一个简单的例子：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  items: []
}

const itemsSlice = createSlice({
  name: 'items',
  initialState,
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload)
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload)
    }
  }
})

export const { addItem, removeItem } = itemsSlice.actions
export default itemsSlice.reducer

解析代码

代码首先导入了 createSlice 方法，并定义了一些默认的初始状态 initialState。接下来调用 createSlice 方法创建了一个名为 items 的切片。

在 reducers 对象中定义了两个 action：addItem 和 removeItem。这些都是 reducer 的纯函数，并修改了传入的 state。这里使用了 mutable 的方式来更新 state，即在原对象上进行修改，而不是创建一个新对象。这是 Redux Toolkit 中使用的最佳实践，因为它对 state 的变更进行了优化。

最后，代码导出了使用 createSlice 方法返回的 actions 和 reducer。actions 可以被视为一个包含 action creators 的对象，每个 action creator 都对应一个定义在 reducers 中的 action。reducer 可以传递给 Redux Store，用于管理应用程序的状态。

总结

这是一个非常基本的例子，用于演示如何创建一个 Redux 切片。当你的应用程序增长时，你可能需要使用不同的 reducer 和 action 来划分状态。但是使用 createSlice 方法可以轻松地创建和管理这些切片，这极大地简化了 Redux 的使用。