React - Redux

1 - About

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

Two steps:

3 - Installation

npm install --save react-redux

4 - API

4.1 - Provider

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

4.2 - Component Type

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

4.2.2 - Function


  • 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

5 - Router

React router and redux. See doc

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

6 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap