Reudx is used for centralized state management, but is not required. “Redux is only necessary when React is a problem that cannot be solved.”

The installation
NPM install redux or YARN add reduxCopy the code

The basic concept

  1. Store, a container for storing data
//store.js
Create a reducer Store using the createStore in redux
import {createStore} from 'redux'
// Reduce the reducer
import Countreducer from './count_Reducer'
// Generate and export Store
exports default createStore(Countreducer)
Copy the code
  1. Reducer, operation data

The essence is a function (⊙﹏⊙), but must be a pure function pure function: can not change the parameters, there can be no uncertain factors of operation, input the corresponding value to return the corresponding value

//count_Reducer.js
// Reducer has two parameters (preState, action)
Data / / I'm here to set the initial value is 0, if is an array of objects can also be in inside | outside initialization
export default function countReducer(preState=0,action){
	// Action contains type and data.
	const{type,data} = action
    // Use the switch to determine the type of operation
    switch(type){
    	case 'add':
        	return preState + data
        case 'subtract':
        	return preState - data
        // Redux initializes this function, default as the initial value. (^∇^*)
        default:
        	return preState
    }
}
Copy the code

These two files are ready to use as soon as they are done

// Here are the components that use store
import React,{component} from 'react'
// Import the file from 1. Store above
import store from './redux/store'
export default class Count extends Component{
	render(){
    	return(){
        	<div>
           		{/* Where the h1 tag is to display data (state), get */ by getState()}
           		<h1>{store.getState()}<h1>
                        <button onClick={this.add}>add</button>
                        <button onClick={this.subtract}>Reduction of</button>
            	<div>
        }
    }
    // Add method
    add = () = >{
    	// Use dispatch to find the reducer function. The requirement is an object with the corresponding type attribute and data
    	store.dispatch({type:'add'.data:1})}// The subtraction method
    subtract = () = >{
    	store.dispatch({type:'subtract'.data:1}}})Copy the code
  1. Action

The above is available, but it is more normal to reducer with action. Because there is no complex logic in the Reducer, try to put logic in the actions

//action.js
// handle 'add'
export function Add(data){
	return {type:'add',data}
}
// handle subtraction
export function Subtract(data){
	return {type:'subtract',data}
}
Copy the code

With action, we are going to change the way we use components

// Use parts of the Store component
import {Add,Subtract} from './redux/action'.// Add method
    add = () = >{
    	store.dispatch(Add(1))}// The subtraction method
    subtract = () = >{
    	store.dispatch(Subtract(1))}Copy the code
  1. Asynchronous action

Aciont returns an object that is synchronous, and an asynchronous action that returns a function that is asynchronous. By default, async actions cannot be handled by default. Use the middleware redux-thunk

npm install redux-thunk
yarn add redux-thunk
Copy the code
//store.js
import {createStore,applyMiddleware} from 'redux'
import Countreducer from './count_Reducer'
import thunk from 'redux-thunk'
exoprt default createStore(Countreducer,applyMiddleware(thunk))
Copy the code
//action.js
// handle 'add'
export function Add(data){
	return {type:'add',data}
}
// handle subtraction
export function Subtract(data){
	return {type:'subtract',data}
}
/ / asynchronous
export function AsynSubtract(data){
	// The return function has dispatch by default
	return(dispatch) = >{
    	setTimeout(() = >{
        	dispatch(Subtract(data))
        },500)}}Copy the code
  1. constant

Because redux operates on type, it’s a good idea to define constants

//constant.js
export const ADD = 'add'
export const SUBTRACT = 'subtract'
Copy the code