1) Clear: Delayed actions do not want to be handed over to the component itself, but to action
2) When you need asynchronous action: you want to operate on the state, but the specific tasks are returned by asynchronous tasks
3) Specific coding:
A. Installation: npm i redux-thunk, and configure it in store,js, and need to introduce thunk and import
applyMiddleware middleware
B. The function to create an action does not return a general object, but a function, which writes an asynchronous task
C. After the asynchronous task has a result, distribute a synchronous action to actually operate the data
D. Remarks: It is not necessary to write asynchronous tasks. You can wait for the results of asynchronous tasks before distributing synchronous tasks.
action
store.js
/*
该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore, applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
export default createStore(countReducer, applyMiddleware(thunk))
count_actions.js
/*
该文件专门为count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "./constant"
//完整写法
// function createIncrementAction(data) {
// return {type:'increment', data }
// }
//简写形式
export const createIncrementAction = data =>( {type:INCREMENT, data })
//完整写法
// function createDecrementAction(data) {
// return {type:'decrement', data}
// }
export const createDncrementAction = data =>( {type: DECREMENT, data })
//异步action,就是值action的返回值是函数,异步action一般都会调用同步action
//异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) =>{
return (dispatch) => {
setTimeout(() => {
dispatch(createIncrementAction(data))
},time)
}
}
count-index.jsx
import React, { Component } from 'react'
//引入store,用于获取redux中获取的状态
import store from '../../redux/store'
//引入actionCreator,专门用于创建action对象
import { createIncrementAction, createDncrementAction, createIncrementAsyncAction} from '../../redux/count_action'
export default class Count extends Component {
state = {carName:'奔驰c63'}// 把状态交给reducer之后组件也可以有自己独用的状态
increment = () => {
const {value} = this.selectNum
store.dispatch(createIncrementAction(value*1))
}
decrement = () => {
const {value} = this.selectNum
store.dispatch(createDncrementAction(value*1))
}
incrementOdd = () => {
const {value} = this.selectNum
const count = store.getState()
if(count % 2 !== 0) {
store.dispatch(createIncrementAction(value*1))
}
}
incrementWait = () => {
const {value} = this.selectNum
store.dispatch(createIncrementAsyncAction(value*1, 500))
}
render() {
return (
<div>
<h1>当前求和为:{store.getState()}</h1>
<select ref={c => {this.selectNum = c}}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick= {this.increment}>+</button>
<button onClick= {this.decrement}>-</button>
<button onClick= {this.incrementOdd}>当前求和为奇数再加</button>
<button onClick= {this.incrementWait}>等一等再加</button>
</div>
)
}
}