How to access Redux store using React Router?

1
votes

Currently within my app I have multiple Routes using React Router that are wrapped within the Redux provider.

Provider

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

As it stands I'm confused how I'm supposed to being passing/accessing the state of the store within the components.

The only state that I really need to be storing is the current status of the user login and want to use this to change what is rendered on the other routes.

Reducer

I have a reducer which looks like:

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

Action

And an action which looks like

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

Now I'm currently working under the assumption that connecting them to the store using export default connect(mapStateToProps, mapDispatchToProps)(LoginForm); would allow me to access the store within that component, but it seems that isn't the case.

I'm a little confused as to how to access the store state within the component and also how to properly write the action/reducer to change this state.

2
reactjsreduxreact-redux

2 Answers

2
votes

So I found where I was going wrong, I needed to pass the props to the route using:

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

And in my configureStore() I was passing rootReducer instead of the simple reducer I had made.

1
votes

Your assumption is correct. It's a good practice to follow the connect pattern. You can create containers for components and do the connection there.

Something like this:

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;

NOTE: This approach is usually used for more complex logic. In your case the LoginPage itself can be a container, so you don't need separate component.