在Reducer中更改状态后未调用mapStateToProps

Question

我有一个简单的注册表格。 我拥有的文件是signup.js，authActions.js和signUpReducer.js。 当执行动作时，动作创建者将分派动作，而reduce会接收到动作对象，并且还会更新状态，但是组件prop并未按预期进行更新。

 export default (state = INITIAL_STATE, action) => { switch(action.type) { case USER_PHONECHANGE: return { ...state, phone: action.payload }; case USER_EMAILCHANGE: return { ...state , email : action.payload }; case USER_FIRSTNAMECHANGE: return { ...state, fName: action.payload }; case USER_MIDDLENAMECHANGE: return { ...state, mName: action.payload }; case USER_LASTNAMECHANGE: return { ...state, lName: action.payload }; case USER_GENDERCHANGE: return { ...state, gender: action.payload }; case USER_SIGNUP_SUCCESS: return state; case USER_SIGNUP_FAIL: return state; default: return state; } }; 

 const mapStateToProps = state => { console.log("hited"); return { userData : state.signUp }; }; const mapDispatchToProps = {UserPhoneNoChanged, UserEmailChanged, UserFirstNameChanged, UserMiddleNameChanged, UserLastNameChanged, UserGenderChanged,UserSignUp} export default connect(mapStateToProps, mapDispatchToProps)(SignUp); 

Answer 1

调度USER_SIGNUP_SUCCESS或USER_SIGNUP_FAIL时，不会调用mapStateToProps，因为在这种情况下，您不会更改状态。 如果您确实需要在这些操作击中减速器之后调用mapStateToProps() ，则需要在返回状态之前更改状态：

export default (state = INITIAL_STATE, action) => { 

  switch(action.type) {

    case USER_SIGNUP_SUCCESS:
      return {...state}; // now the state has another reference 

    case USER_SIGNUP_FAIL:
      return {...state}; // now the state has another reference 

    default: 
      return state;
  }
};