The react-redux package provides React bindings for the Redux state container making it very easy for a React application to be connected to a Redux store. This allows you to separate your React application components based on their connection to the Redux store as follows:
- Presentational Components — These components are only concerned with how things look and are not aware of the Redux state. They get their data from props and may trigger callbacks passed to them via props.
- Container Components — These components are responsible for how things work and are fully aware of the Redux state. They are often created using React Redux and may dispatch Redux actions. They also subscribe to changes in the Redux state.
You can learn more about this separation of concerns here.
Check your knowledge by reading Storybook with React and Redux. Master your skills!
p.s. In the end of the day, remember this quote: ‘Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.’ That makes a lot of sense!