Question

我对redux很新，所以我可能会在这里做些傻事。

我有一个LoginComponent应该在全局存储集中设置一个名为loggedIn的变量，指示用户已登录。然后导航栏应该能够显示按钮（登录/注册或注销）取决于该变量是否为真。

我有一个看起来像这样的LoginComponent：

true

然后我在class LoginComponent extends Component { constructor(props) { super(props); //... local state stuff for render() } login() { let self = this; axios.post('/user/login', { username: this.state.username, password: this.state.password }).then(function (response) { self.setState({errorMessage: ''}); self.props.setLoggedIn(true); //Here is the action that should be dispatching to change the variable. self.props.history.push('/'); }).catch(function (error) { console.log(error); }); } render() { return ( //A simple login form with username/password. ); } } function mapStateToProps(state) { const { loggedIn } = state; return { loggedIn }; } function mapDispatchToProps(dispatch) { return bindActionCreators({ setLoggedIn }, dispatch) } export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);中执行了操作：

UserActions.js

跟随export function setLoggedIn(loggedIn) { const action = { type: 'SET_LOGGED_IN', loggedIn }; return action; }中的reducer：

UserReducer.js

不管怎样，我应该能够通过export default ((state = [], action) => { switch (action.type) { case 'SET_LOGGED_IN': let { loggedIn } = action; return loggedIn; default: return state; } });在NavBarComponent中访问此内容：

this.props

但是，在我的控制台中，在我的NavBarComponent中调用class NavBarComponent extends Component { test() { console.log(this.props); } render() { console.log(this.props); return ( <div><button className="btn btn-default btn-header" onClick={() => {this.test()}}>Check</button></div> ); } } function mapStateToProps(state) { const { loggedIn } = state; return { loggedIn }; } export default connect(mapStateToProps, null)(NavBarComponent);函数后，我看到：

test()

所以，问题是，为什么loggingIn undefined而不是true或false？

修改

这就是我的商店/提供商在index.js中的样子：

Object {history: Object, loggedIn: undefined, dispatch: function}

我的AppReducer：

let store = createStore(AppReducer);

ReactDOM.render(
    <Provider store={store}>
        <div>
            <Router path="/" history={browserHistory}>
                <div>
                    <NavBarComponent history={browserHistory}/>
                    <Route path="/login" component={LoginComponent} />
                    <Route path="/register" component={RegisterComponent} />
                    <Route exact path="/" component={AppComponent}/>
                </div>
            </Router>
        </div>
    </Provider>, document.getElementById('root')
);

Answer 1

我认为问题出在UserReducer.js

export default ((state = [], action) => {
    switch (action.type) {
        case 'SET_LOGGED_IN':
            let { loggedIn } = action;
            return loggedIn;
        default:
            return state;
    }
});

如果没有看到商店的创建方式，我猜这应该看起来更像是

export default ((state = {}, action) => {
    switch (action.type) {
        case 'SET_LOGGED_IN':
            let { loggedIn } = action;
            // assuming you have the spread operator available - if not, use Object.assign({}, state, { loggedIn })
            return { ...state, loggedIn };
        default:
            return state;
    }
});

说明

首先是初始状态。您的state默认为[]这是一个空数组，但您将其用作对象，因此我将其切换为{}，一个空对象。

其次，reducer函数应该返回状态的不可变更改，但仍必须返回整个状态。因此，您的SET_LOGGED_IN处理程序将状态更改为单个布尔值，而不仅仅是更改loggedIn值

let { loggedIn } = action;
return loggedIn;

spread operator or Object.assign可用于复制现有状态，但替换loggedIn值

let { loggedIn } = action;
// assuming you have the spread operator available - if not, use Object.assign({}, state, { loggedIn })
return { ...state, loggedIn };

提示

追踪这类问题的好工具是redux devtools。您可以查看调度的操作以及状态如何受到影响。

或者，一个简单的技巧是放置console.log(state)' in the mapStateToProps`函数来查看你必须使用的内容

function mapStateToProps(state) {
    console.log(state)
    const { loggedIn } = state;
    return { loggedIn };
}

评论后编辑

如果您将状态视为

{ 
    /* other stuff */ 
    UserReducer: {
        loggedIn: true 
    } 
    /* maybe more stuff */ 
}

然后我假设您在创建商店时使用combineReducers。这是正常行为，例如

const store = createStore(combineReducers({ SomeReducer, UserReducer, OtherReducer })

combineReducers的正常行为是将每个状态切片嵌入到已合并的reducer贴图的键中。

如果是这种情况，那么您应该使用完整路径来访问组件上的状态

function mapStateToProps(state) {
    return { 
        loggedIn: state.UserReducer.loggedIn 
    };
}

如果您想更改密钥以更好地代表您的域，则可以在组合时使用其他密钥

const store = createStore(combineReducers({ someReducer, user: UserReducer, otherReducer })

function mapStateToProps(state) {
    return { 
        loggedIn: state.user.loggedIn 
    };
}

Answer 2

switch (action.type) {
    case 'SET_LOGGED_IN':
        let { loggedIn } = action;
        return loggedIn; // this will make your state true
    default:
        return state;
}

尝试返回行动，即{ loggedIn: true };

您可以从这里访问

    function mapStateToProps(state) {
      const { loggedIn } = state;
      return { loggedIn };
   }

React / Redux：在调度操作后，无法将存储变量作为来自其他组件的道具访问？

2 个答案:

说明

提示

评论后编辑