React/Redux：在动作调度后无法从另一个组件访问存储变量作为道具？

Question

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

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

我有一个如下所示的登录组件：

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

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

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

编辑

这就是我的 store/provider 在 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

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

Answer 2

我认为问题出在 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 函数应该 return 对状态进行不可变更改，但必须仍然 return 整个状态。因此，您的 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 themapStateToProps` 函数以查看您必须使用什么

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

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

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

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

React/Redux：在动作调度后无法从另一个组件访问存储变量作为道具？

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

javascript

reactjs

redux

react-redux

说明

提示

评论后编辑