créateur d'action, trop de params envoyé Réducteur

voix
0

J'envoie à beaucoup à mon réducteur:

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

Dans mon réducteur je l'envoie les données que je dois trier, et les params pertinents:

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

Plutôt que d' envoyer datadans l'action, puis - je importer dans mon reducer, comme ceci:

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

Mon mapDispatchToPropsdevient très confus:

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))
});
Créé 19/12/2018 à 14:13
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Vous pouvez considérablement simplifier votre code en utilisant le formulaire « raccourci objet » demapDispatch . Il suffit de définir un objet avec les créateurs d'action, comme:

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

De plus, je suppose que vous pourriez probablement consolider certaines de ces actions « set » à une seule "USER_FORM_UPDATED"action ou quelque chose de similaire.

Créé 19/12/2018 à 16:53
source utilisateur

voix
0

Si des données est un objet statique, vous pouvez l'importer à partir du réducteur. Il reste une fonction pure. Mais je voudrais faire mon réducteur aussi simple que possible et peut-être je déplacer cette logique au créateur d'action. Voilà pourquoi nous créons des créateurs d'action en premier lieu qu'ils peuvent contenir une logique aussi bien.

Par exemple:

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
  };
}
Créé 19/12/2018 à 14:32
source utilisateur

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