twórca Akcja, zbyt wiele params wysyłane do reduktor

głosy
0

Przesyłam dużo do mojego reduktora:

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

W moim reduktora go wysłać do potrzebnych danych do sortowania i odpowiednich params:

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

Zamiast wysyłać dataw akcji, mogę zaimportować to w moim reducer, tak jak poniżej:

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

My mapDispatchToPropsstaje się bardzo kłopotliwe również:

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))
});
Utwórz 19/12/2018 o 14:13
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
1

Można drastycznie uprościć swój kod za pomocą „obiekt” skrótowej formymapDispatch . Wystarczy zdefiniować obiekt z tych twórców działań, takich jak:

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

Także, to myślę, że można prawdopodobnie konsolidować niektóre z tych działań „set” w dół do jednego "USER_FORM_UPDATED"działania lub coś podobnego.

Odpowiedział 19/12/2018 o 16:53
źródło użytkownik

głosy
0

Jeśli dane jest statyczny obiekt można importować go z reduktorem. pozostanie czystą funkcję. Ale chciałbym, aby mój reduktor tak proste, jak to możliwe, a może przenieść tę logikę do twórcy akcji. Dlatego tworzymy twórców działanie w pierwszej kolejności, że mogą one zawierać logikę, jak również.

Na przykład:

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
  };
}
Odpowiedział 19/12/2018 o 14:32
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more