在Redux Toolkit中如何将API返回的列表数据写入Slice初始状态对应字段

步骤1：在Slice中新增批量更新bank字段的reducer #

Redux Toolkit内置Immer支持，你可以直接修改状态值，不需要手动返回不可变对象：

import { createSlice } from '@reduxjs/toolkit'

const yourSlice = createSlice({
  name: 'yourSliceName',
  initialState: {
    // 你原来的初始状态
    initialDefaultReceiveChecks:{
      data:[
        {
          'customer_payor': null,
          'bank': null,
          'bank_branch': null,
          'check_no': null,
          'check_date': null,
          'amount': null,
          'remarks': null,
        },
        // 剩下4条结构相同的初始数据
      ]
    }
  },
  reducers: {
    setBankListForAllItems: (state, action) => {
      // action.payload 为你获取到的银行列表数据
      const bankList = action.payload
      // 遍历data数组所有项，统一赋值bank字段
      state.initialDefaultReceiveChecks.data.forEach(item => {
        item.bank = bankList
      })
    }
  }
})

// 导出action供组件调用
export const { setBankListForAllItems } = yourSlice.actions

export default yourSlice.reducer

步骤2：拿到银行列表后调用dispatch触发更新 #

在你获取到银行列表的逻辑位置（比如接口请求成功回调、useEffect监听逻辑中），调用dispatch传入银行列表即可：

import { useDispatch } from 'react-redux'
import { setBankListForAllItems } from './path/to/yourSlice'

// 组件内逻辑
const YourComponent = () => {
  const dispatch = useDispatch()

  // 示例：假设在接口请求拿到银行列表后更新
  const fetchBankListSuccess = (bankListData) => {
    dispatch(setBankListForAllItems(bankListData))
  }

  // 其他组件逻辑
  return <div>...</div>
}

可选调整说明 #

• 如果银行列表是异步获取的，也可以搭配createAsyncThunk使用，在thunk的fulfilled回调中执行上述更新逻辑，写法和普通reducer完全一致
• 如果需要保留data数组中部分项原有已填写的bank值，可以在遍历的时候加判断条件，只给bank为null的项赋值即可

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