React-Redux
Redux implements a store as a data storage center, which can be accessed and modified by the outside world. This is the idea of Redux. But Redux itself has no essential connection with React, but the data management method of Redux is very compatible with React's data-driven view concept.
Now that there is a safe place to access data, how to integrate it into React? We can create a store = createStore(reducer) when the application is initialized, and then obtain data through store.getState() where needed, update data through store.dispatch, subscribe to data changes through store.subscribe and then proceed setState... If you do this in many places, it is really unbearable, and it still does not avoid the inelegance of global variables.
Since global variables have many disadvantages, let's change the way of thinking and integrate the store directly into the top-level props of the React application, as long as each sub-component can access the top-level props.
In fact, React-Redux provides several high-level components, let's take a look.
1.provider
React-Redux provides the Provider component, through which the store can be passed to its subcomponents and grandchildren components, instead of manually introducing each component.
index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {
Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={
store}>
<App />
</Provider>,
document.getElementById('root')
);
2.connect
The connect method can connect the component to the store, so that data can be read from the redux store and re-read data after the store is updated.
import {
connect } from "react-redux";
const Counter = (props) => {
const {
num, sum, ADD, MINUS, SUM_ADD, SUM_MINUS} = props
return (
<div>
<p>{
num}</p>
<button onClick={
ADD}>+</button>
<button onClick={
MINUS}>-</button>
<p>{
sum}</p>
<button onClick={
SUM_ADD}>+</button>
<button onClick={
SUM_MINUS}>-</button>
</div>
)
}
const mapStateToProps = (state, ownProps) => {
const {
count } = state.countReducer;
const {
sum } = state.sumReducer;
return {
num: count,
sum: sum
};
};
const mapDispatchToProps = (dispatch, ownProps) => {
return {
ADD: () =>
dispatch({
type: "ADD"
}),
MINUS: () =>
dispatch({
type: "MINUS"
}),
SUM_ADD: () =>
dispatch({
type: "SUM_ADD"
}),
SUM_MINUS: () =>
dispatch({
type: "SUM_MINUS"
})
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
The previous store.js does not need to be modified, and the result is as shown in the figure:
connect receives two parameters, both of which are optional:
- mapStateToProps: Called whenever the store state changes, receives the entire store, and returns a data object required by the component
- mapDispatchToProps: This parameter can be a function or an object.
- If a function, it will be called once the component is created. Receives dispatch as a parameter and returns an object that can use dispatch to dispatch actions
- If it is an object composed of action creators, each action creator will be converted into a prop function, and actions will be automatically distributed when called. NOTE: It is recommended to use this form