reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之实现异步获取的数据的redux-thunk(三)

在上一篇文章中，我们通过redux来获取状态管理中的数据，但是由于redux的局限，它是同步的，对于我们异步接口数据的处理显然就无法满足了，这时我们需要借助插件redux-thunk来做相关的操作。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
//引入reducer
import { counter } from "./index.redux";
//引入创建store方法
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
//创建store
const store = createStore(counter, applyMiddleware(thunk));

const data = store.getState();
console.log(store, "store");
console.log(data, "data"); 
function render() {
  ReactDOM.render(<App store={store} />, document.getElementById("root"));
}
render();
store.subscribe(render);

看到下面的结果就说明，我们的配置没有问题 然后再index.redux.js

...
//redux-thunk实现异步的延迟处理,返回的是一个函数，自带了dispatch方法
export function addGunAfrer() {
  //redux-thunk返回函数
  return (dispatch) => {
  //延迟三秒执行
    setTimeout(() => {
      dispatch(addOne());
    }, 3000);
  };
}
...

改造我们的App.js

//App.js
...
import { addOne, removeOne, addGunAfrer } from "./index.redux";
...
<Button type="primary" onClick={() => store.dispatch(addGunAfrer())}>
          过了三秒钟后赢了一把
        </Button>
...

然后测试下我们的按钮事件

这样我们的redux-thunk就配置就成功运行了！