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)

or

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