Redux Toolkit的formSlice reducer中如何实现多选复选框状态处理

多选复选框的状态适合用字符串数组存储所有已选中的发色值，使用toggle类的action即可实现点击复选框时的选中/取消选中逻辑，具体修改如下： #

1. 核心修改点 #

• 给FormState接口新增hairColour: string[]字段，标注该字段存储已选中的发色列表
• 初始状态中hairColour设为空数组
• 新增toggleHairColour reducer：接收单个发色值作为入参，判断该值是否已存在于数组中，存在则移除，不存在则加入

2. 完整修改后代码 #

import type { RootState } from '../store'
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface FormState {
    pagesCompleted: number,
    addressStreet: string,
    addressCity: string,
    // 新增发色字段：存储所有已选中的发色值
    hairColour: string[]
}

const initialState = {
    pagesCompleted: 0,
    addressStreet: '',
    addressCity: '',
    // 初始无选中发色
    hairColour: []
} as FormState;

export const formSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    incrementPagesCompleted: state => {
      state.pagesCompleted += 1
    },
    setAddressStreet: (state, action: PayloadAction<string>) => {
      state.addressStreet = action.payload
    },
    setAddressCity: (state, action: PayloadAction<string>) => {
      state.addressCity = action.payload
    },
    // 新增切换发色选中状态的reducer
    toggleHairColour: (state, action: PayloadAction<string>) => {
      const colour = action.payload
      const existedIndex = state.hairColour.indexOf(colour)
      if (existedIndex > -1) {
        // 已选中则移除
        state.hairColour.splice(existedIndex, 1)
      } else {
        // 未选中则加入
        state.hairColour.push(colour)
      }
    }
  }
})

export const { 
  incrementPagesCompleted, 
  setAddressStreet, 
  setAddressCity,
  // 导出新增的action
  toggleHairColour 
} = formSlice.actions

export default formSlice.reducer

3. 组件中使用示例 #

在复选框的点击事件中直接dispatchtoggleHairColour，传入当前点击的发色值即可：

// 发色选项可根据业务需求自定义
const hairColourOptions = ['黑色', '棕色', '金色', '灰色']

// 渲染复选框组
{hairColourOptions.map(colour => (
  <label key={colour}>
    <input
      type="checkbox"
      checked={formState.hairColour.includes(colour)}
      onChange={() => dispatch(toggleHairColour(colour))}
    />
    {colour}
  </label>
))

内容的提问来源于stack exchange，提问作者morgansbored