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