MapStateToprops在还原器中的状态变化后未被调用

Question

我有一个简单的注册表单。我拥有的文件是Ingip.js，Authactions.js和IngiupReducer.js。执行操作后，动作创建者会派遣操作，而还原器会接收操作对象并更新状态，但组件道具未按预期进行更新。

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;
  }
};