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，因为在这种情况下您不更改状态。如果您确实需要在这些动作执行到reducer之后调用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;
  }
};

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

1 个答案: