【React】 20课 解决reactn内的redux异步执行函数报错方法

redux内异步函数执行如图所示：

本项目的目录结构如下：

redux内实现异步方法首先我们需要安装redux-thunk：

cnpm install redux-thunk --save

在创建数据仓库的过程我们通过compose方法与applyMiddleware中间件来解决异步函数问题

const store = createStore(
  reducer,
  compose(
    applyMiddleware(thunk)  //中间件用于处理store仓库内部异步方法
  )
); 

本项目主要代码如下：

在redux文件夹中我们存放redux的index.js文件 内容如下:

const add_Num = '增加一条数据';
const remove_Num = '删除一条数据';

// import {createStore} from "redux";
/*
  state:数据原先的状态
  action:需要来进行改造的内容
    action.type 决定你要处理的类型
      进行判断：if，swich
*/ 
export function reducer(state=0,action){
  switch(action.type){
    case '增加一条数据':
      return state + 1
    case '删除一条数据':
      return state - 1
    default:
      return 0
  }
}

export function addNum(){
  return{
    type: add_Num
  }
}

export function removeNum(){
  return{
    type: remove_Num
  }
}

//异步函数
export function removeAsync(){
  return dispatch=>{
    setTimeout(()=>{
      dispatch(removeNum())
    }, 2000)
  }
}

在src内的index.js文件我们创建一个store数据创库 内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './redux/index'
import {
  reducer,
  addNum,
  removeNum,
  removeAsync
} from './redux/index'; //导入redux文件
//applyMiddleware中间件， compose处理异步函数的方法
import { createStore, applyMiddleware,compose } from 'redux';  //引入redux
import thunk from 'redux-thunk';

//创建库
const store = createStore(
  reducer,
  compose(
    applyMiddleware(thunk)  //中间件用于处理store仓库内部异步方法
  )
); 

render();
function render(){
  ReactDOM.render(
    <App 
      store={store}
      add={addNum}
      remove={removeNum}
      removeAsync={removeAsync}
    />,
    document.getElementById('root')
  );
}

//监听到dispatch事件执行，后数据改变时就执行render()
store.subscribe(render)

在App组件中执行数据仓库内的异步函数：

import React, { Component } from 'react'

export default class App extends Component {
  render() {
  //获取根组件传递过来的 数据仓库与仓库内的方法
    const {store, add, remove,removeAsync} = this.props;
    return (
      <div>
        <h1>redux实践</h1>
        <h2>数据有{ store.getState() }条</h2>
        
        <input 
          type="button"
          value={'增加'}
          onClick={
            ()=>{store.dispatch( add() ) }
          }
        />
        <input 
          type="button"
          value={'删除'}
          onClick={
            ()=>{store.dispatch( remove() ) }
          }
        />
        {/* {异步的函数} */}
        <input 
          type="button"
          value={'异步删除数据'}
          onClick={
            ()=>{store.dispatch( removeAsync() ) }
          }
        />
      </div>
    )
  }
}