javascript - 如何在Redux中创建Dynamic Reducer

我在Redux商店中有这个object：

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

假设我在表单上有三个步骤，每个步骤都会更新一个特定的部分，所以我将一个用于更新标识的操作称为另一个操作，用于更新本地化的操作，将另一个称为更新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中进行搜索，但是它不起作用。

这是一个好方法吗？

最佳答案

在当前的reducer中，操作ID（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 })