Wie Sie hinzufügen/entfernen, um ein redux-Shop generiert mit normalizr?

Folgende ist direkt von einem post von der redux/normalizr Schöpfer hier:

Damit Ihr Staat Aussehen würde:

{
  entities: {
    plans: {
      1: {title: 'A', exercises: [1, 2, 3]},
      2: {title: 'B', exercises: [5, 1, 2]}
     },
    exercises: {
      1: {title: 'exe1'},
      2: {title: 'exe2'},
      3: {title: 'exe3'}
    }
  },
  currentPlans: [1, 2]
}

Ihre Reduzierstücke Aussehen könnte

import merge from 'lodash/object/merge';

const exercises = (state = {}, action) => {
  switch (action.type) {
  case 'CREATE_EXERCISE':
    return {
      ...state,
      [action.id]: {
        ...action.exercise
      }
    };
  case 'UPDATE_EXERCISE':
    return {
      ...state,
      [action.id]: {
        ...state[action.id],
        ...action.exercise
      }
    };
  default:
    if (action.entities && action.entities.exercises) {
      return merge({}, state, action.entities.exercises);
    }
    return state;
  }
}

const plans = (state = {}, action) => {
  switch (action.type) {
  case 'CREATE_PLAN':
    return {
      ...state,
      [action.id]: {
        ...action.plan
      }
    };
  case 'UPDATE_PLAN':
    return {
      ...state,
      [action.id]: {
        ...state[action.id],
        ...action.plan
      }
    };
  default:
    if (action.entities && action.entities.plans) {
      return merge({}, state, action.entities.plans);
    }
    return state;
  }
}

const entities = combineReducers({
  plans,
  exercises
});

const currentPlans = (state = [], action) {
  switch (action.type) {
  case 'CREATE_PLAN':
    return [...state, action.id];
  default:
    return state;
  }
}

const reducer = combineReducers({
  entities,
  currentPlans
});

Also, was ist hier Los? Beachten Sie zunächst, dass der Zustand normalisiert. Wir haben nie Personen in anderen Einrichtungen. Sie beziehen sich auf jede andere von der IDs. Also wenn ein Objekt verändert, es gibt nur einen einzigen Ort, wo Sie aktualisiert werden muss.

Zweiten, merken, wie wir darauf reagieren CREATE_PLAN sowohl durch hinzufügen einer entsprechenden Einheit in den Plänen reducer und, indem seine ID an den currentPlans reducer. Das ist wichtig. Bei komplexeren apps, die Sie haben können Beziehungen, z.B. Pläne reducer verarbeiten kann ADD_EXERCISE_TO_PLAN in der gleichen Weise durch Anhängen einer neuen ID in das array innerhalb der plan. Aber wenn die übung selbst aktualisiert, gibt es keine Notwendigkeit für Pläne reducer zu wissen, dass, als ID hat sich nicht geändert.

Dritten, beachten Sie, dass die Entitäten Reduzierstücke (Pläne und übungen) spezielle Klauseln Ausschau nach der Aktion.Personen. Dies ist für den Fall haben wir eine server-Antwort mit "bekannte Wahrheit", die wir aktualisieren möchten alle unsere Gesellschaften zu reflektieren. Bereiten Sie Ihre Daten auf diese Weise vor dem Versand eine Aktion, die Sie verwenden können, normalizr. Sie sehen es in der "real world" - Beispiel in der Redux-repo.

Beachten Sie schließlich, wie Entitäten Reduzierstücke ähnlich sind. Möchten Sie vielleicht eine Funktion schreiben, zu generieren. Es ist aus der Umfang meiner Antwort ist—manchmal möchte man mehr Flexibilität, und manchmal möchten Sie weniger boilerplate. Sie können sich die Paginierung code in der "realen Welt" Beispiel Reduzierstücke für ein Beispiel der Erzeugung ähnlichen Reduzierungen.

Oh, und ich { ...a, b...} - syntax. Es aktiviert in Babel Phase 2 als ES7 Vorschlag. Es nennt sich "Objekt-spread-operator" und entspricht zu schreiben-Objekt.assign({}, a, b).

Als für Bibliotheken, die Sie verwenden können, Lodash (seien Sie vorsichtig, nicht zu mutieren, obwohl, z.B. merge({}, a, b} korrekt ist, aber merge(a, b) ist nicht), updeep, reagieren-addons-update oder etwas anderes. Allerdings, wenn Sie feststellen, selbst benötigen, um eine tiefgreifende updates, es wahrscheinlich bedeutet, dass Ihr Zustand Baum ist nicht flach genug, und dass Sie nicht verwenden die funktionale Komposition genug. Auch Ihr erstes Beispiel:

case 'UPDATE_PLAN':
  return {
    ...state,
    plans: [
      ...state.plans.slice(0, action.idx),
      Object.assign({}, state.plans[action.idx], action.plan),
      ...state.plans.slice(action.idx + 1)
    ]
  };

kann geschrieben werden als

const plan = (state = {}, action) => {
  switch (action.type) {
  case 'UPDATE_PLAN':
    return Object.assign({}, state, action.plan);
  default:
    return state;
  }
}

const plans = (state = [], action) => {
  if (typeof action.idx === 'undefined') {
    return state;
  }
  return [
    ...state.slice(0, action.idx),
    plan(state[action.idx], action),
    ...state.slice(action.idx + 1)
  ];
};

//somewhere
case 'UPDATE_PLAN':
  return {
    ...state,
    plans: plans(state.plans, action)
  };

Habe ich umgesetzt, eine kleine Abweichung von Generika reducer werden kann über das internet gefunden. Es ist in der Lage löschen von Elementen aus dem cache. Alles, was Sie tun müssen ist, stellen Sie sicher, dass auf jedem löschen Sie senden eine Aktion mit Feld gelöscht:

export default (state = entities, action) => {
    if (action.response && action.response.entities)
        state = merge(state, action.response.entities)

    if (action.deleted) {
        state = {...state}

        Object.keys(action.deleted).forEach(entity => {
            let deleted = action.deleted[entity]

            state[entity] = Object.keys(state[entity]).filter(key => !deleted.includes(key))
                .reduce((p, id) => ({...p, [id]: state[entity][id]}), {})
        })
    }

    return state
}

Beispiel zur Verwendung in Aktion-code:

await AlarmApi.remove(alarmId)

dispatch({
    type: 'ALARM_DELETED',
    alarmId,
    deleted: {alarms: [alarmId]},
})