Reactjs Redux状态道具值未定义

大家好，我正在创建一个用户登录的模拟。我使用的是redux logger，记录的状态值始终是我希望看到的值，但是，当我使用console.log（this.props）时

我总是不确定地回来。我的reducer有一个状态值，我已经定义并作为默认值传入。我不知道为什么我回来时没有定义，只是无法理解。这是我的密码。如果需要任何帮助，我将不胜感激。我需要访问这些值，但如果没有定义，则无法实现

我将把锅炉板上的东西，比如导入语句等，再次浓缩下来作为上下文。我所要做的就是在我的组件内部能够访问我的状态值，这些状态值是在我的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 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>

---

问题是您的

mapstatetops

对象，也就是说，您希望标志位于根状态

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

---

您正在通过

rootReducer

将

loginForm

作为存储传递给连接的组件：

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

因此，在

MapStateTops

中，您可以执行以下操作：

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

---

你们商店的定义是什么？供应商是什么样子的？请尽可能以最好的方式接受这一点，但我绝对相信这与我的商店或供应商无关。我的动作和减速器连接起来了，我只是回到了未定义的状态。我不认为有必要采取防御姿态；）我正在尝试调查您的

MapStateTops

是否真的映射到了您期望的正确状态。但是，你的reducer返回一个对象，现在如果你使用combinereducer，那么你有一个基于多个不同键的状态，并且你的存储可以指示你的状态在那时的结构。我不是说处于防御状态。我将编辑并发布我的store和combineReducers方法。因此，在更新时，

MapStateTrops

不应该指向

state.loginForm.isLoginPending

？对于那些使用TypeScript的人：我也有同样的问题。我使用子状态作为MapStateTops的方法属性类型，因此intellisense没有提醒我错误。i、 e.根状态由（使用组合编辑器）子状态1和子状态2组成。对于我的组件，MapStateTrops最初的方法属性类型为SubState1，这是不正确的。RootState是属性类型。

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

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