React - Redux

About

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

Two steps:

You made the redux store available globally with a provider
You bind a presentational component with the connect function.

Installation

React redux binding

npm install --save react-redux

API

Provider

Provider make the store available globally.

Example:

// 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)

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

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.
dispatch actions.
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,
  mapDispatchToProps
)(Component)

where:

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

Example:

AddTodo = connect()(AddTodo)

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

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {
    dispatch(setVisibilityFilter(ownProps.filter))
  }
})

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

Function

See https://react-redux.js.org/api/hooks

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

Router

React router and redux. See doc

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

Documentation / Reference

https://redux.js.org/docs/basics/UsageWithReact.html