16.使用Redux-thunk中间键实现ajax数据请求19-05-28

到Github中搜redux-thunk,点开start最多的中间件的目录,打开，有使用步骤，找到Installation先安装

npm install redux-thunk
或
yarn add redux-thunk

在store的index中引入applyMiddleware方法，使我们可以使用中间件方法。
import { createStore , applyMiddleware} from 'redux';

再引入rudux模块儿
import thunk from 'redux-thunk';
在createStore中添加applyMiddleware(thunk),即创建store的时候会使用thunk中间件。

以下是同时使用redux-devtools的代码改写

在 redux-devtools-extension
高级商店设置中
1.2 Advanced store setup
复制代码

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);

以便使用中间件thunk，同时引用redux_devtools

+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

代码改写如下

import { createStore , applyMiddleware,compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;
const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);
const store = createStore(
  reducer,
  enhancer,
);
export default store;

4.当使用了redux_thunk以后,action可以是一个函数了

export const getTodoList = () => {  
//使用了redux_thunk这里可以return一个函数了
return () => {
//函数里就可以做异步的操作
axios.get('/list.json').then((res)=>{
//此处使用Charles实现本地数据，(https://www.jianshu.com/p/b73ca383a31b)
      const data = res.data;
     // console.log(data);
     // const action = initListAction(data);
     // dispatch(action);
   }
}

5.调用getTodoList这个函数
到TodoList.js中引入getTodoList函数

import {getInputChangeAction,getAddItemAction,getDeleteItemAction,getTodoList} from './store/actionCreators'

创建一个action
const action = getTodoList();//打印action，这里的action返回的是一个函数

componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);//直接通过dispatch方法把action发给store，此时action里的函数会自动执行
    console.log(action);
  }

6.创建action改变store里的数据

export const initListAction = (data)=>({
  type:INIT_LIST_ACTION,
  data
});

export const getTodoList = () => {
  return (dispatch) => {//getTodoList 是函数可以接收到store的dispatch方法。
    axios.get('/list.json').then((res)=>{
      const data = res.data;
      console.log(data);
      const action = initListAction(data);
      dispatch(action);//调用dispatch方法把action发给store
    })
  }
}

附加

什么是redux中间件

371559099163_.pic.jpg

中间件是action和store之间的 ，对dispatch方法的封装或升级