如何在 Redux 中创建动态 Reducer答案

【问题标题】：How to create a Dynamic Reducer in Redux如何在 Redux 中创建动态 Reducer
【发布时间】：2019-08-18 22:29:52
【问题描述】：

Redux Store 在我的状态下有这个 object：

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

假设我的表单上有三个步骤，每个步骤都更新一个特定部分，所以我调用一个更新操作 identification 其他更新操作 localizacion最后一个用于更新 rdSocial，（对不起西班牙变量）。这里重要的部分是每个动作的有效载荷，它是整个altaUsuario 对象的一部分，例如，这是我的一个动作：

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

现在，我的 reducer 从 state 对象复制并更新 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 中使用我想要更新的特定属性进行搜索，但它不起作用。

这是一个好方法吗？

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux reducers

【解决方案1】：

在当前的 reducer 中，动作 ID（ADD_ID_FIELDS、ADD_LOCAL_FIELDS、ADD_RD_SOCIAL）决定了哪个字段将被更新（identificacion、localizacion、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 })

【讨论】：

所以，根据这个，我的操作应该是这样的：export const addField = (payload, fieldToUpdate) => ({ type: ADD_FIELD, fieldToUpdate, payload })
类似的东西。我更新了我的答案以更准确。