时间戳

首页 > 解决方案 > 如何使用 React Router 访问 Redux 存储？

reactjs - 如何使用 React Router 访问 Redux 存储？

问题描述

目前在我的应用程序中，我有多个使用 React Router 的路由，这些路由封装在 Redux 提供程序中。

提供者

<Provider store={store}>
<Router>
    <Route exact path ="/" component = {LoginPage}></Route>
    <Route exact path="/login" component ={LoginPage}/>   
    <Route path ="/change" component={MasterPage}/>     
    <Route path="/change/form" component={ChangeForm}/>
    <Route path="/change/table" component={ExpandTable} /> 
</Router>
</Provider>

就目前而言，我很困惑我应该如何传递/访问组件中商店的状态。

我真正需要存储的唯一状态是用户登录的当前状态，并希望使用它来更改在其他路由上呈现的内容。

减速器

我有一个减速器，看起来像：

export default (state = {}, action) => {
    switch (action.type) {
     case 'SIMPLE_ACTION':
      return {
       loggedIn: action.loggedIn,
       User: action.User,
       Group: action.Group
      }
     default:
      return state
    }
   }

行动

还有一个看起来像的动作

export const simpleAction = () => dispatch => {
                   dispatch({
                     type: 'SIMPLE_ACTION',
                     payload: data
                    })
                   }

现在我正在假设将它们连接到商店使用 export default connect(mapStateToProps, mapDispatchToProps)(LoginForm); 将允许我访问该组件中的商店，但似乎情况并非如此。

对于如何访问组件内的存储状态以及如何正确编写动作/reducer 来更改此状态，我有点困惑。

标签： reactjsreduxreact-redux

解决方案

所以我发现我哪里出错了，我需要使用以下方法将道具传递给路线：

render={(props) => <LoginPage {...props} login={store.getState()} />}>

在我的 configureStore() 中，我传递的是 rootReducer 而不是我制作的简单减速器。

推荐阅读