Как создать динамический редуктор в Redux - PullRequest
Новая
       51

Как создать динамический редуктор в Redux

2 голосов
/ 28 марта 2019

У меня есть object в моем состоянии из Redux Store : 

 altaUsuario: {
    //identificacion
    identificacion : {
      email:  '',
      username: '',      
    },
    //Localización
    localizacion : {     
      direccion: '',
      cp: '', 
      provincia: '',
    },
    //Redes sociales
    rdSocial : [
      { 
        red:"", 
        name:""
      },
    ],

Допустим, у меня есть три шага в моей форме, и каждый из них обновляет определенныйраздел, поэтому я вызываю действие для обновления идентификация другое действие для обновления localizacion и последнее для обновления rdSocial , (извините за испанские переменные).Важной частью здесь является полезная нагрузка от каждого действия, которая является частью всего объекта altaUsuario. Например, это одно из моих действий: 

{
  type: 'ADD_ID_FIELDS',
  payload: {
    email: '',
    username: 'josue',
  }
}

Теперь мой редуктор делает копию изобъект состояния и обновите свойство altaUsuario с обновлением определенной части объекта, которую я хочу обновить.(Звучит странно) Давайте посмотрим, как я это делаю: 

    case ADD_ID_FIELDS: 
      return { ...state, altaUsuario : {...state.altaUsuario, identificacion :action.payload }}
    case ADD_LOCAL_FIELDS: 
      return { ...state, altaUsuario : {...state.altaUsuario, localizacion :action.payload }}
    case ADD_RD_SOCIAL: 
      return { ...state, altaUsuario : { ...state.altaUsuario, rdSocial : action.payload}}
    default:

Итак, как я могу автоматизировать этот процесс одним действием?

Это то, что у меня пока есть, но оно не работает: 

case ADD_FIELD: 
      Object.keys(state.altaUsuario).map (cat => { 
          if(Object.keys(action.payload).some(r=> Object.keys(state.altaUsuario[cat]).includes(r))){                  
            return { ...state, altaUsuario : {...state.altaUsuario, [cat] :action.payload }}
          }
      })

Моя идея заключалась в том, чтобы выполнить поиск внутри altaUsuario с определенным свойством, которое я хочуобновить, но это не работает.

Это хороший подход?

1 Ответ

1 голос
/ 28 марта 2019

В текущем редукторе идентификатор действия (ADD_ID_FIELDS, ADD_LOCAL_FIELDS, ADD_RD_SOCIAL) определяет, какое поле будет обновлено (идентификатор, локализация, rdSocial).

Таким образом, для того, чтобы вы приблизились к работе, вам нужно будет указать, какой параметр обновлять при выполнении действия. Например. как часть действия. Примерно так: 

case "ADD_FIELD":
    return { ...state, altaUsuario: {...state.altaUsuario, [action.fieldToUpdate]: action.payload }};

Вызов действия будет выглядеть примерно так: 

export const addField = (payload, id) => dispatch => 
    dispatch({ type: ADD_FIELD, fieldToUpdate: id, payload })
...