React - Redux


React Redux is a binder for React of the Redux state management.

Two steps:


npm install --save react-redux



Provider make the store available globally.


// Needed when using Jsx
import React from 'react';
// Needed to render the app
import ReactDOM from 'react-dom';

// Redux for the storage
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import reducer from './reducer'

// Create a store using your reducer (function that handles the action)
const store = createStore(reducer)

    <Provider store={store}>

Component Type

Class: Connect

The React Redux library's connect() function create a container components around the presentational component it renders.

This container component:

  • uses store.subscribe() to read a part of the Redux state tree and supply props to the presentational component.
  • Provides many useful optimizations to prevent unnecessary re-renders. (no implementation of shouldComponentUpdate)

The connect() function:

  • returns a new function that accepts the component to wrap
  • and takes two arguments (both optional):
export default connect(


  • mapStateToProps(state, [ownProps]): stateProps is a function that:
    • is called every time the store state changes.
    • transform:
      • the entire current Redux store state (state)
      • into an props (stateProps) that the component needs. The results must be a plain object which will be merged into the component’s props.
    • will subscribe the component to Redux store updates. If you don't want to subscribe to store updates, pass null or undefined
  • mapDispatchToProps can be:
    • a function mapDispatchToProps(dispatch, [ownProps]): dispatchProps is a function:
      • receives the dispatch() method
      • and returns callback props that you inject into the presentational component.
    • or an object containing actions. Each action will be turned into a prop function that automatically dispatches its action when called


AddTodo = connect()(AddTodo)


const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {

const FilterLink = connect(



  • useSelector to:
    • get data (don't create new variable, otherwise the component will rerender, see explanation below or use memoized-selectors)
    • and automatically subscribes to the Redux store
  • useDispatch to dispatch

Any time an action is dispatched:

  • it will call its selector function
  • the output will be compared with a strict === reference comparisons (warning: value may be the same with two different reference and not be equal)
  • if the comparison is not equal, the component will re-render


React router and redux. See doc

const Root = ({ store }) => (
  <Provider store={store}>
      <Route path="/" component={App} />

Documentation / Reference

Discover More
React - Higher Order Component (HOC)

Higher Order Component is a function that takes a component and returns a new component. It's not really a component, more a design pattern known as decorator. Redux’s connect Relay’s...
React - State

This page is UI State in React. The Local state to a component in react is known as: state. A change of state triggers a render ref. A change of ref value does not triggers a render The global...
Redux Devtool Chrome

is a state manager. The state inside a store is updated via a function that takes an as argument and pass it to a reducer function. The reducer will calculate a new state passing it back to the...

Share this page:
Follow us:
Task Runner