React Redux is a binder for React of the Redux state management.
Two steps:
npm install --save react-redux
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')
);
The React Redux library's connect() function create a container components around the presentational component it renders.
This container component:
The connect() function:
export default connect(
mapStateToProps,
mapDispatchToProps
)(Component)
where:
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)
See https://react-redux.js.org/api/hooks
Any time an action is dispatched:
React router and redux. See doc
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>
)