代码之家  ›  专栏  ›  技术社区  ›  Bomber

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

  •  0
  • Bomber  · 技术社区  · 6 年前

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

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

    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))
    });
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   markerikson    6 年前

    通过使用 "object shorthand" form of mapDispatch . 只需使用这些动作创建者定义一个对象,如:

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

    此外,我猜您可能会将一些“设置”操作合并为一个 "USER_FORM_UPDATED" 动作或类似的动作。

        2
  •  0
  •   Peter Ambruzs    6 年前

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

    例如:

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