Redux 状态道具值未定义

Question

大家好，我正在创建用户登录的模拟。我正在使用 redux 记录器，记录的状态值始终是我想看到的值，但是，当我 console.log(this.props)

我总是返回undefined。我的减速器有一个状态值，我已经定义并作为默认值传入。我不确定为什么我会返回 undefined 并且无法弄清楚。这是我的代码。任何帮助将不胜感激我需要访问这些值但是未定义它是行不通的。

我将压缩样板文件，如导入语句等。也再次用于上下文。我想要做的就是在我的组件内部能够访问我的 reducer 内部定义的状态值。例如，其中之一是 isLoginPending。当我 console.logging this.props.isLoginPending 时，我希望获得默认值或新的 Object.assigned 值，而不是未定义的。我的理想目标是在我的组件内部获得一个未定义的值。

这是我的组件

render() {
        let {email, password} = this.state;
        console.log("PROPS*****" + this.props.isLoginPending);
        return (
            <div className="form-wrapper" >
                <form onSubmit={this.submit} name="login-form">
                    <label htmlFor="login-form">Email</label>
                    <input onChange={this.changedEmail} type="email" />
                    <br />
                    <label htmlFor="login-form"> Password </label>
                    <input onChange={this.changedPassword} type="password" />
                    <button type="submit">Login </button>

                </form>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
       isLoginPending: state.isLoginPending,
       isLoginSuccess: state.isLoginSuccess,
       isloginError: state.isloginError
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: (email, password) => dispatch(login(email ,password))
    };
}


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

减速机

 export default function (state = {
        isLoginPending: false,
        isLoginSuccess: false,
        isLoginError: null
    }, action)
     {
        switch(action.type) {
            case constants.LOGIN_SUCCESS:
            console.log("state" + state.isLoginPending);
            return Object.assign({}, state, {isLoginSuccess: action.isLoginSuccess})

            case constants.LOGIN_PENDING:
            return Object.assign({}, state, {isLoginPending: action.isLoginPending})

            case constants.LOGIN_ERROR:

            return Object.assign({}, state, {isLoginError: action.isLoginError})

            default: 
            return state
        }
    }

操作

export const login = (email, password) => {
    return dispatch => {
        dispatch(loginPending(true));
        dispatch(loginSuccess(false));
        dispatch(loginError(null));

    sendLoginRequest(email, password, error => {
        dispatch(loginPending(false));
        if(!error) {
            dispatch(loginSuccess(true));
        } else {
            dispatch(loginError(error));
        }
    });
    }
}

const sendLoginRequest = (email, password, callback) => {
    setTimeout(() => {
        if(email === 'admin@admin.com' && password === 'password') {
            return callback(null);
        } 

        else {
            return callback(new Error("invalid email or password"));
        }
    }, 1000)
}

** 编辑 **

const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>

传入存储的根减速器

const rootReducer = combineReducers({
  loginForm: emailReducer
});

export default rootReducer;

Answer 1

问题出在您的 mapStateToProps 对象上，即您希望标志位于 rootstate

const mapStateToProps = (state) => {
    return {
       isLoginPending: state.isLoginPending,
       isLoginSuccess: state.isLoginSuccess,
       isloginError: state.isloginError
    }
}

然而，当我们看到你的根减速器时，你有一个多级状态，将这些标志添加到 state.loginForm

const rootReducer = combineReducers({
  loginForm: emailReducer
});

所以像这样改变你的 mapStateToProps 应该可以

const mapStateToProps = (state) => {
    return {
       isLoginPending: state.loginForm.isLoginPending,
       isLoginSuccess: state.loginForm.isLoginSuccess,
       isloginError: state.loginForm.isloginError
    }
}

Answer 2

您正在通过 rootReducer 将 loginForm 作为商店传递给连接的组件：

const rootReducer = combineReducers({
  loginForm: emailReducer
});

所以在 mapstateToProps 里面你可以做：

const mapStateToProps = (state) => {
    return {
       isLoginPending: state.loginForm.isLoginPending,
       isLoginSuccess: state.loginForm.isLoginSuccess,
       isloginError: state.loginForm.isloginError
    }
}

Redux 状态道具值未定义

Redux state props value is undefined

reactjs

redux

redux-thunk