Создатель действия, слишком много параметров отправлено редуктору

Question

Я посылаю много в мой редуктор:

export const setStudent = (data, value, year, group, showStudent) => ({
    type: "SET_STUDENT",
    data,
    value,
    year,
    group,
    showStudent
});

В моем редукторе я отправляю ему данные, которые мне нужно отсортировать, и соответствующие параметры:

  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 };

Вместоотправьте data в действии, могу ли я импортировать это в мой 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))
});

Answer 1

Вы можете существенно упростить свой код, используя формуляр "Сокращения объектов" mapDispatch.Просто определите объект с этими создателями действий, например:

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

Кроме того, я бы предположил, что вы могли бы объединить некоторые из этих «установленных» действий в одно действие "USER_FORM_UPDATED" или нечто подобное.

Answer 2

Если данные являются статическим объектом, вы можете импортировать их из редуктора.Это останется чистой функцией.Но я бы сделал свой редуктор как можно более простым, и, возможно, я перенесу эту логику в создатель действий.Вот почему мы создаем создателей действий, во-первых, чтобы они могли содержать логику.

Например:

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
  };
}