Explanation of the working principle and usage of redux

store.dispatch(action);

let nextState = todoApp(previousState, action);

//Set the listening function store.subscribe(listener);

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

//Introduce createStore, which is specifically used to create the core store object in redux import {createStore, applyMiddleware} from 'redux'
//Introduce the reducer that serves the Count component
import countReducer from './count_reducer'
//Introduce redux-thunk to support asynchronous actions
import thunk from 'redux-thunk'
//Expose the store  
//applyMiddleware is the middle position using thunk
export default createStore(countReducer,applyMiddleware(thunk))

const initState = 0 //Initialization state export default function countReducer(preState=initState,action){
	// console.log(preState);
	//Get from the action object: type, data
	const {type,data} = action
	//Decide how to process data based on type switch (type) {
		case 'increment': //if it is to add return preState + data
		case 'decrement': //If it is a decrease, return preState - data
		default:
			return preState
	}
}

// public index.js
import store from './redux/store'

//subscribe will update the data when the data in the store changes. Writing it here allows the global store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

//Import Count UI component import CountUI from '../../components/Count'

//Introduce connect to connect UI components and redux
import {connect} from 'react-redux'

-------------------------------------------------------------
/* 
	1. The mapStateToProps function returns an object;
	2. The key in the returned object is used as the key passed to the UI component props, and the value is used as the value passed to the UI component props
	3.mapStateToProps is used to pass state*/
function mapStateToProps(state){
	return {count:state}
}
-----------------------------------------------------------------
/* 
	1. The mapDispatchToProps function returns an object;
	2. The key in the returned object is used as the key passed to the UI component props, and the value is used as the value passed to the UI component props
	3.mapDispatchToProps is used to pass the operation status method*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}
//Use connect()() to create and expose a Count container component export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
//Improved export default connect(
	state => ({count:state}),
	
	//General writing of mapDispatchToProps /* dispatch => ({
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}) */

	//Shorthand for mapDispatchToProps {
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

/* 
	This file is specifically used to generate action objects for the Count component*/
import {INCREMENT,DECREMENT} from '../constant'

//Synchronous action means that the value of the action is a general object of type Object export const increment = data => ({type:INCREMENT,data})
export const decrement = data => ({type:DECREMENT,data})

//Asynchronous action means that the value of action is a function. Asynchronous action usually calls synchronous action, but asynchronous action is not required.
export const incrementAsync = (data, time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(increment(data))
		},time)
	}
}