Throughout the book, we have been splitting the components into presentational and container components. There are a few things that we can do with Redux by following that pattern.

The presentational components will not be aware of Redux, and their main job is to present the UI. All markup and CSS classes will be defined in the presentational components. On the other hand, the containers will take care of the data and will barely contain any markup. The main difference is that we will have Redux to generate the containers for us.

Redux is not a React library, and we can get the bindings from the react-redux library:

import {connect} from 'react-redux'
class Tweets extends React.Component {
  ...
}

const mapStateToProps = (state) => ({tweets: state.tweets, filters: state.filters})
export default connect(mapStateToProps)(Tweets)

Here's how it works: