作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Redux Store 的状态下有这个对象
:
altaUsuario: {
//identificacion
identificacion : {
email: '',
username: '',
},
//Localización
localizacion : {
direccion: '',
cp: '',
provincia: '',
},
//Redes sociales
rdSocial : [
{
red:"",
name:""
},
],
假设我的表单有三个步骤,每个步骤都更新一个特定的部分,所以我调用一个更新操作 identification 其他操作更新 localizacion最后一个用于更新 rdSocial,(对西类牙变量感到抱歉)。这里重要的部分是每个 Action 的有效负载,它是整个 altaUsuario
对象的一部分,例如,这是我的一个 Action :
{
type: 'ADD_ID_FIELDS',
payload: {
email: '',
username: 'josue',
}
}
现在,我的 reducer 从状态对象创建一个副本并更新 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:
So, How could I automate this process in one single action?
这是我目前所拥有的,但它不起作用:
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 中搜索我想要更新的特定属性,但它不起作用。
这是一个好方法吗?
最佳答案
在 current 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 }};
Action 调用看起来像这样:
export const addField = (payload, id) => dispatch =>
dispatch({ type: ADD_FIELD, fieldToUpdate: id, payload })
关于javascript - 如何在 Redux 中创建 Dynamic Reducer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55392742/
我是一名优秀的程序员,十分优秀!