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.

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')
);


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

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

5 - Router

React router and redux. See doc


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

6 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap