根据 onChange 事件值更改 redux 状态

IT技术 javascript reactjs redux
2021-05-21 02:01:42

我正在使用 redux 并且我的状态为空字符串值。必须使用 input onChange 事件填充每个空键。假设我想更改 'business_selected' 键，函数应该是什么样的？这是我的状态：


const initialState = {

        user: {},
        applications: [
            {
                companyFlow: {
                    stage1: {
                        business_activity: "",
                        business_selected: ""
                    },

                    stage2: {
                        legal_name: "",
                        registration_number: "",
                        business_website: "",
                        incorporation_date_text: "",
                        legal_form: ""
                    }
                }
            }
        ]
};

export default function changeInput(state = initialState, action) {
  switch (action.type) {
    case CHANGE_INPUT:
      return {
        // ??????
      };
    default:
      return state;
  }
}
3个回答

onChnage值应该存储在本地状态而不是 redux 状态。理想情况下，只有全局值应该存储在 redux 状态中。

撇开对深度嵌套状态变量的担忧（建议避免），并认为您在全局可访问这些变量背后的理由是理所当然的（尽管，这似乎是选择器的一个很好的用例），如果您要问的是，在最基层，是如何绑定调度某些行动，以组件事件（如属性，如onChange，onKeyUp等），我会建议参考官方教程关于这一主题。

但是，在其非常简单的情况下，以下示例演示了一般概念。您可以自行决定在状态复杂性和组件灵活性之间进行扩展和重新平衡。

显示代码片段

通常onChange使用component本身的本地状态来处理，但如果你想这样做，redux你可以做这样的事情。

export default function changeInput(state = initialState, action) {
  switch (action.type) {
    case CHANGE_INPUT:
      return {
       ...state,
       applications: state.applications.map(application => {
        return Object.assign({}, application, {
         ...application,
         companyFlow: {
          ...application.companyFlow,
          stage1: {
            ...application.companyFlow.stage1,
            business_selected: action.payload
          }
         }
        }
       return application
      });
    default:
      return state;
  }
}
其它你可能感兴趣的问题
上一篇防止重新渲染在包装器组件中启动 useState 的同级组件 下一篇使用react得到错误 this.node(...) is null ？