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
- 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
- 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
- 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
- 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
- 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