Reactjs 动作创建者,发送到减速器的参数太多

Reactjs 动作创建者,发送到减速器的参数太多,reactjs,redux,Reactjs,Redux,我向我的减速机发送了很多信息: export const setStudent = (data, value, year, group, showStudent) => ({ type: "SET_STUDENT", data, value, year, group, showStudent }); 在我的reducer中,我将需要排序的数据和相关参数发送给它: case "SET_STUDENT": let stude

我向我的减速机发送了很多信息:

export const setStudent = (data, value, year, group, showStudent) => ({
    type: "SET_STUDENT",
    data,
    value,
    year,
    group,
    showStudent
});
在我的reducer中,我将需要排序的数据和相关参数发送给它:

  case "SET_STUDENT":
        let studentName = data
            .find(option => {
                return option.id == year;
            })
            .options.find(option => {
                return option.id == group;
            })
            .options.find(option => {
                return option.id == value;
            }).label;

        return { ...state, student: value, label: studentName };
与其在操作中发送数据,不如在我的reducer中导入它,如下所示:

import { data } from "../config/calendars.js";
我的mapDispatchToProps也变得非常混乱:

const mapDispatchToProps = dispatch => ({
    fetchEvents: id => dispatch(fetchEvents(id)),
    isLoadingCredentials: loadingCredentials =>
        dispatch(isLoadingCredentials(loadingCredentials)),
    setCredentials: credentials => dispatch(setCredentials(credentials)),
    setYear: year => dispatch(setYear(year)),
    setGroup: (group, data, year) =>
        dispatch(setGroup(group, data, year)),
    setStudent: (data, e, year, group, showStudent) =>
        dispatch(setStudent(data, e, year, group, showStudent)),
    resetForm: () => dispatch(resetForm()),
    setAuthenticated: value => dispatch(setAuthenticated(value))
});

如果数据是静态对象,则可以从减速器中导入。它将保持一个纯函数。但我会让我的减速机尽可能简单,也许我会把这个逻辑转移到动作创建者那里。这就是为什么我们首先创建动作创建者,因为它们也可以包含逻辑

例如:

import { data } from "../config/calendars.js";

export const setStudent = (value, year, group, showStudent) => {
  let studentName = data
    .find(option => {
      return option.id == year;
    })
    .options.find(option => {
      return option.id == group;
    })
    .options.find(option => {
      return option.id == value;
    }).label;

  return {
    type: "SET_STUDENT",
    student: value,
    label: studentName
  };
}

通过使用,您可以大大简化代码。只需使用这些动作创建者定义一个对象,如:

const mapDispatchToProps = {
    fetchEvents,
    isLoadingCredentials,
    setCredentials,
    setYear,
    setGroup,
    setStudent,
    resetForm,
    setAuthenticated,
}

此外,我想您可能可以将一些设置操作合并为单个用户表单更新操作或类似操作。

将其导入我的reducer是什么意思?reducer的主要任务是基于操作返回新状态。如果您的操作不需要上下文数据,那么您总是可以从某处获得它。