Next, a case of adding and subtracting numbers will be used to illustrate the use of React-redux
Install library
Install redux library, react-redux library, redux-thunk library
yarn add redux
yarn add react-redux
yarn add redux-thunk
Redux
Definition: redux is a JS library dedicated to state management (not a react plugin library)
The core is store and reducers
store.js creates a store object
We recommend creating a redux folder under the src folder to store all redux states
src/redux/store.js
// This file is specially used to expose a store object, and there is only one store object in the entire application // Introduce createStore, which is specially used to create the most core store object in redux import { createStore, applyMiddleware } from "redux"; // Introduce redux-thunk to support asynchronous action import thunk from "redux-thunk"; // import the merged reducer import allReducer from "./reducer"; // expose the store export default createStore(allReducer, applyMiddleware(thunk));
Reducer processing data
We recommend creating a reducer folder under the redux folder for unified management of all reducers, and merge them back into the store file
src/redux/reducer/count.js
import { INCREMENT, DECREMENT } from "../constant"; const initState = 0; export default function countReducer(preState = initState, action) { const { type, data } = action; switch (type) { case INCREMENT: return preState + data; case DECREMENT: return preState - data; default: return preState; } }
src/redux/reducer/index.js
Merge all reducers
import { combineReducers } from "redux"; // Introduce a reducer that serves the count component import count from "./count_reducer"; export default combineReducers({ count });
Action
Create an action object
src/redux/action/count.js
import { INCREMENT, DECREMENT } from "../constant"; export const increment = (data) => ({ type: INCREMENT, data }); export const decrement = (data) => ({ type: DECREMENT, data }); export const incrementAction = (data, time) => { return (dispatch) => { setTimeout(() => { dispatch(increment(data)); }, time); }; };
Other
Unified Management Constants
We recommend creating a constant js file under the redux folder for unified management of all store constants
For example: src/redux/constant.js
/* This module is used to define the constant value of the type type in the action object */ export const INCREMENT = "increment"; export const DECREMENT = "decrement";
React-Redux
we generally recommend
The components folder contains UI components
The containers folder contains container components
Container component operations. containers/Count/index.jsx
Map state mapstateToProps
Method mapDispatchToProps for mapping operation state
Note: When we register the routing table, we introduce the container component, not the UI component
// Introduce the UI component of Count import CountUI from "../../components/Count"; //Introduce connect to connect UI components and redux import { connect } from "react-redux"; import { increment, decrement, incrementAction, } from "../../../../redux/action/count"; // function mapStateToProps(state) { // return { count: state }; // } // function mapDispatchToProps(dispatch) { // return { // add: (number) => dispatch(increment(number)), // reduce: (number) => dispatch(decrement(number)), // addAsyc: (number, time) => dispatch(incrementAction(number, time)), // }; // } // Use connect()() to create and expose a Count container component I // export default connect(mapStateToProps, mapDispatchToProps)(CountUI); export default connect((state) => ({ count: state.count }), { increment, decrement, incrementAction, })(CountUI);
UI component components/Count/index.jsx
import React, { Fragment, useRef } from "react"; export default function Count(props) { // Get the ref instance of the selection box const selectNum = useRef(); //add const increment = () => { const { current: { value }, } = selectNum; props. increment(value * 1); }; //reduce const decrement = () => { const { current: { value }, } = selectNum; props.decrement(value * 1); }; //odd plus const incrementIfOdd = () => { const { current: { value }, } = selectNum; if (props. count % 2 !== 0) { props. increment(value * 1); } }; //add asynchronously const incrementAsyc = () => { const { current: { value }, } = selectNum; props.incrementAsyc(value * 1, 500); }; return ( <Fragment> <h1>The current sum is: {props.count}</h1> <select ref={selectNum}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={increment}> + </button> <button onClick={decrement}>-</button> <button onClick={incrementIfOdd}>The current sum is an odd number plus</button> & amp;nbsp; <button onClick={incrementAsyc}>Asynchronous addition</button> </Fragment> ); }
Global pass store
provide does not require an additional single transfer of store to the component
The store is passed globally, and the store will be passed to the required components according to the requirements
src/index.jsx
Install Redux DevTools
Install Redux DevTools on the Internet
Install the library with redux developer tools
yarn add redux-devtools-extension
Introduce redux-devtools-extension in store