根据 React-Redux 中的用户输入数据更新存储

Question

我有使用钩子的经验，但没有使用基于 class 的组件和 redux。

我有一个向导表单，Page1 有 firstName 和 lastName 输入字段。一个 next 按钮，它转到第 2 页并在必要时充当提交。

我期待什么？

每当用户在其中一个字段中输入一些值时，它应该更新 redux 存储。（我不确定我是否应该直接在输入字段 的 onChange 事件上更新商店，或者 先将其存储在状态中，然后在 onSubmit 上更新商店）

更新：

目前，此代码无效。每当我在 firstName 输入字段中键入第一个字符时，商店中的属性就会变得不确定。

// store.js FILE
const rootReducer = combineReducers({
  signUpCounterPage: reducer1,
  user: reducer2, 
});

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger))
);


// Types.js FILE
export const UPDATE_FIRSTNAME = "UPDATE_FIRSTNAME";
export const UPDATE_LASTNAME = "UPDATE_LASTNAME";
export const UPDATE_ADDRESS = "UPDATE_ADDRESS";
export const UPDATE_APT_UNIT = "UPDATE_APT_UNIT";
// --------------------------

// Actions.js FILE
export const updateFirstName = (action) => ({
  type: UPDATE_FIRSTNAME,
  ...action,
});

export const updateLastName = (action) => ({
  type: UPDATE_LASTNAME,
  action,
});

export const updateAddress = (action) => ({
  type: UPDATE_ADDRESS,
  action,
});

export const updateAptUnit = (action) => ({
  type: UPDATE_APT_UNIT,
  action,
});
// --------------------------


// reducer2.js FILE
const initialState = {
  firstName: "",
  lastName: "",
  address: "",
  aptUnit: "",
};

const signupUserReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_FIRSTNAME:
      return { ...state, firstName: action.value };
    case UPDATE_LASTNAME:
      return { ...state, lastName: action.value };
    case UPDATE_ADDRESS:
      return { ...state, address: action.value };
    case UPDATE_APT_UNIT:
      return { ...state, aptUnit: action.value };
    default:
      return state;
  }
};
// --------------------------


// Page1.js FILE
    const mapStateToProps = (state) => ({
      firstName: state.firstName,
    });
    const mapDispatchToProps = (dispatch, param) => ({
      updateFirstName: () => dispatch(updateFirstName(param.value)),
    });

    class Page1 extends Component {
      state = {
        firstName: "",
        lastName: "",
      };
      render() {
        const {
          nextPage,
          firstName,
          updateFirstName
        } = this.props;
        return ( <
          div className = "onboarding-page d-flex justify-content-center align-items-center" >
          <
          div className = "d-flex flex-column align-items-center" >
          <
          Form className = "d-flex flex-column justify-content-center" >
          <
          Form.Row >
          <
          Form.Group as = {
            Col
          }
          controlId = "formGridFirstName" >
          <
          Form.Control type = "text"
          placeholder = "Enter First Name"
          value = {
            firstName
          }
          onChange = {
            (e) => updateFirstName({
              value: e.target.value
            })
          }
          />  <
          /Form.Group>

          <
          Form.Group as = {
            Col
          }
          controlId = "formGridLastName" >
          <
          Form.Control type = "text"
          placeholder = "Enter Last Name"
          value={lastName}
          onChange={(e) => updateLastName({ value: e.target.value })}
          /
          >
          <
          /Form.Group> < /
          Form.Row > <
          Form.Group className = "d-flex justify-content-center" >
          <
          Button variant = "primary"
          size = "medium"
          onClick = {
            nextPage
          } >
          Next < /
          Button > <
          /Form.Group> < /
          Form > <
          /div> < /
          div >
        );
      }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(Page1);

Answer 1

const mapDispatchToProps = (dispatch) => ({ updateFirstName: (param) => dispatch(updateFirstName(param)), updateLastName: (param) => dispatch(updateLastName(param)) })

请更新你的 mapDispatchToProps 函数，你犯了一个小错误

根据 React-Redux 中的用户输入数据更新存储

Update store based on user input data in React-Redux

reactjs

react-bootstrap

redux

我期待什么？

更新：