redux-thunk 在使用中的具体左右是什么？

Question

最近项目打算上react-redux，注意到很多项目中同时也用来redux-thunk；查看文档，发现是用于异步操作，但是从demo看，实在看不到有什么作用，请码友指教

Answer 1

在你的网络请求成功之后，根据返回来的数据dispatch一个action，然后react修改页面。你写web都不用异步请求数据吗？

例如

export const register = ()=>{
  return (dispatch, getState)=>{
    const {account:{username, password}} = getState();
    //告诉页面注册流程开始
    dispatch({type:types.REGISTER_START})
    axios.post(
      'account/register',
      {username, password},
      config
    )
      .then(resp=>{
        if(_2XX(resp.status)){
        //注册成功
          dispatch({type:types.REGISTER_SUCCESS, payload:'userid'})
        }
      })
      .catch(error=>{
      //注册失败
        dispatch({type:types.REGISTER_FAILED, payload:error.response})
      })
  }
};

Answer 2

刚看完阮一峰的文章，来此探讨一下（阮一峰链接点此）

首先理解中间件概念

常规的操作是view发出action通过dispath发送给store， reducer接收action生成新的state利用subscribe渲染view，这是正常的同步操作。但是当需要异步操作时，view发出action的，需要等到异步结果才会处理reducer，所以需要一种工具帮助完成这个操作，中间件就是这么来的。

其次分析redux中的异步操作

redux的异步操作会发送两个action，一个是刚开始操作时（此时是同步的），一个是异步结果返回时（此时是异步的）。

const fetchPosts = postTitle => (dispatch, getState) => {
  // 发送同步action
  dispatch(requestPosts(postTitle));
  return fetch(`/some/API/${postTitle}.json`)
    .then(response => response.json())
    // 发送异步action
    .then(json => dispatch(receivePosts(postTitle, json)));
  };
};

// 使用方法一
store.dispatch(fetchPosts('reactjs'));
// 使用方法二
store.dispatch(fetchPosts('reactjs')).then(() =>
  console.log(store.getState())
);

redux-thunk的作用

上面的案例可以看出fetchPosts(reactjs)函数的执行返回值还是一个函数(dispatch, getState)=>{} ，由于dispath只能接受对象，所以需要redux-thunk这个中间来对这个函数进行处理。