Where to keep active user data on React + Redux client application

Question

On my React + Redux client app, I need to get the active user info (fetch from myapp.com/users/me) and keep it somewhere so that I can access it from multiple components.

I guess window.activeUser = data would not be the best practice. But I could not find any resource about the best practice of doing that. What would be the best way to do what I want?

Answer 1

you can keep it in a separate reducer, and then import multiple parts of your state with connect() in your components.

Say if you have 2 reducers called users.js and tags.js which are combined with combineReducers when setting up your store. You would simply pull different parts by passing a function to your connect() call. So using es6 + decorators:

const mapStateToProps = state => {
  return {users: state.users, tags: state.tags}
}

@connect(mapStateToProps)
export default class MyComponent extends React.Component {

and then down in your render function:

return (
  <div>
    <p>{this.props.users.activeUsernameOrWhatever}</p>
    <p>{this.props.tags.activeTags.join('|')}</p>
  </div>
);

So your different reducer states become objects on this.props.