提供商

<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); 可以让我访问该组件中的商店，但事实并非如此。

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

Answer 1

所以我发现出了问题，我需要使用以下命令将道具传递到路线：

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

在我的configureStore（）中，我传递的是rootReducer而不是我制作的简单的reducer。

Answer 2

您的假设是正确的。遵循connect模式是一个好习惯。您可以为组件创建容器并在那里进行连接。

类似这样的东西：

LoginPage.js

const LoginPage = ({loggedIn}) => {
    console.log(loggedIn);
    return null; // Write your markup here
}

LoginPage.propTypes = {
    loggedIn: PropTypes.bool
}

export default LoginPage;

LoginPageContainer.js

import LoginPage from './LoginPage';

let LoginPageContainer = ({loggedIn}) => {
    return <LoginPage loggedIn={loggedIn} />
};

LoginPageContainer.propTypes = {
    loggedIn: PropTypes.bool
    //...
}

const mapStateToProps = state => {
    return {
        loggedIn: state.........
    };
};

LoginPageContainer = connect(mapStateToProps)(LoginPageContainer);

export default LoginPageContainer;

注意：此方法通常用于更复杂的逻辑。在您的情况下，LoginPage本身可以是一个容器，因此您不需要单独的组件。

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

提供商

减速器

动作

2 个答案: