如何在反应打字稿中使用字典类型在redux中添加项目

Question

我正在使用带有 typescript 的 react-redux。我正在我的 redux 切片中导入一个 JSON 文件作为初始值。现在，我想对字典执行 crud 操作。我只想在所需的键中添加项目，为此类型结构是什么以及如何执行操作？

我的外部 JSON 包含有关部门的员工数据。 department 作为键，employees 作为对象数组。我的结构如下所示：

{
  "0": [{...},{...},{...}],
  "1": [{...},{...},{...}],
  "2": [{...},{...},{...}],
}

我的切片代码如下所示：

type employeeType = {
    id: number,
    name: string,
    age: number,
    DOB: number
}

type departments = {
    [departmentNo: string]: employeeType[];
}

const initialState:departments = require("./data.json");


export const employeeReducer = (state: departments = initialState, action: any) => {
    switch (action.type){
        case "ADD_EMPLOYEE": {
            return ({})
        }
        default: {
            return state
        }
    }
}

Answer 1

想一想您需要哪些信息才能对 state 进行正确的修改。您所在的州是按部门编号键入的，因此要添加新员工 ，您需要知道要将他们添加到哪个部门。您还需要了解员工对象的所有详细信息。您的 action.payload 可能如下所示：

interface AddEmployeePayload {
    departmentNo: string;
    employee: EmployeeType;
}

我强烈建议使用 Redux Toolkit so that you can use a simple push operation instead of dealing with immutable nested updates 创建减速器。

如何处理 departmentNo 与 state 对象上的现有数组不匹配的情况取决于您。抛出错误？创建一个新数组？

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const employeeSlice = createSlice({
  name: 'employees',
  initialState,
  reducers: {
    addEmployee: (state, action: PayloadAction<AddEmployeePayload>) => {
      // Get the data from our action.
      const { departmentNo, employee } = action.payload;
      // Access the existing array of employees in this department.
      const employeeArray = state[departmentNo];
      if (employeeArray) {
        // Add this employee to the array.
        employeeArray.push(employee);
      } else {
        // Warn about potential invalid ids.
        console.warn(`Unknown department number ${departmentNo}.`);
        // Create a new department array with just this employee in it.
        state[departmentNo] = [employee];
      }
    }
  }
})


export const employeeReducer = employeeSlice.reducer;

// action creator function
export const { addEmployee } = employeeSlice.actions;

Complete Code

如何在反应打字稿中使用字典类型在redux中添加项目

How to add item in redux with dictionary type in react typescript

typescript

reactjs

react-redux

react-typescript