React-redux (functional components)

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>
       &nbsp;
      <button onClick={increment}> + </button> &nbsp;
      <button onClick={decrement}>-</button> &nbsp;
      <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