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

Question

我对 redux 还很陌生，所以我可能在这里做了一些愚蠢的事情。

我有一个 LoginComponent，它应该将全局存储中名为 loggedIn 的变量设置为 true 指示用户已登录。然后导航栏应该能够然后根据该变量是否为 true 显示按钮(登录/注册或注销)。

我有一个如下所示的 LoginComponent:

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() 函数后，我看到:

对象{历史记录:对象，登录:未定义，调度:函数}

那么，问题是，为什么loginIn未定义而不是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 的正常行为是将每个状态切片与所组合的缩减器映射的键嵌套在一起。

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

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