javascript - react /归零 : Can't access store variable as props from another component after action dispatched?

Question

我是 redux 的新手，所以我可能在这里做了一些愚蠢的事情。

我有一个 LoginComponent，它应该在全局存储中将一个名为 loggedIn 的变量设置为 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;
}

后面是UserReducer.js中的reducer:

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

不知何故，我应该能够通过 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);

但是，在我的控制台中，在我的 NavBarComponent 中调用 test() 函数时，我看到:

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

那么，问题是，为什么 loggedIn 未定义而不是 true 或 false？

编辑

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

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')
);

还有我的 AppReducer:

import { combineReducers } from 'redux';
import UserReducer from '../User/UserReducer'

export default combineReducers({
    UserReducer
});

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 处理程序正在将状态更改为单个 bool 值，而不仅仅是更改 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)' 放在 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 
    };
}

如果您想更改 key 以更好地代表您的域，您可以在组合时使用不同的 key

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

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