Understand the initial use of redux in react in one article

import React, { Component, Fragment } from 'react';

//Class importimport { connect } from 'react-redux';

//Hook import { useSelector, useDispatch } from 'react-redux'

import { add, clear } from '../../redux/actions/count';


//hook display component const CountItem = (props) => {
    // Deconstruct const {
        count,
        flag,
        add,
        clear
    } = props
    return (
        <>
            <h2>Current sum: {count}</h2>
            <h3>Current Flag: {flag ? 'true' : 'false'}</h3>
            <button onClick={add}>Click +1</button>
            <button onClick={clear}>Clear</button>
        </>
    )
}

//hook container component const Count = () => {
    const count = useSelector(state => state.sum)
    const flag = useSelector(state => state.flag)
    const dispatch = useDispatch()

    const countAdd = () => {
        console.log(add.type)
        dispatch(add(1))
    }

    const clearNum = () => {
        dispatch(clear())
    }

    return <CountItem count={count} flag={flag} add={countAdd} clear={clearNum} />
}

export default Count



// class display component // class Count extends Component {
// add = () => {
// // Notify redux
// this.props.add(1);
// };
// clear = () => {
// this.props.clear();
// };
// render() {
// return (
// <Fragment>
// <h2>The current sum is: {this.props.count}</h2>
// <h3>Current Flag: {this.props.flag ? 'true' : 'false'}</h3>
// <button onClick={this.add}>Click +1</button>
// <button onClick={this.clear}>clear</button>
// </Fragment>
// );
// }
// }

// class container component // export default connect(
// // 1. State// state => ({ count: state.sum, flag: state.flagState }),
// // 2. Methods // { add, clear }
// )(Count);

// Create an action object for the Count component // Import constants import { ADD, CLEAR } from '../constant';

// Create a function to add an action object export const add = data => ({
    type: ADD,
    data,
});

// Create a function to clear the action object export const clear = data => ({
    type: CLEAR,
    data,
});

export const ADD = 'add';
export const CLEAR = 'clear';

// Create a reducer for the Count component
// reducer receives two parameters: preState of the previous state, action object action

import { ADD, CLEAR } from '../constant.js';

// Set the initial state const initState = 0;

export default function addReducer(preState = initState, action) {
    // Get type and data from action
    const { type, data } = action;
    //Decide how to process data based on type switch (type) {
        case ADD:
            return preState + data;
        case CLEAR:
            return 0;
        // Initialization action default:
            return preState;
    }
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import store from './redux/store';
import { Provider } from 'react-redux';

ReactDOM.render(
    // Provider wraps App, purpose: to allow all descendant container components of App to receive store
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

// The entire document has only one store object. createStore receives two parameters, the first is the state tree, and the second is the action to be processed.
//applyMiddleware aggregates all middleware into an array and executes them in sequence, asynchronously processing import { createStore, applyMiddleware } from 'redux';
//Middlewareimport thunk from 'redux-thunk';
//Summarize all reducers
import allReducers from './reducers/index';
//Here is Google's debugging tool, specific usage: Baidu import { composeWithDevTools } from 'redux-devtools-extension';

// Expose the store
export default createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)));