redux-thunk入门

今天来介绍在使用redux中必不可少用要用到的中间件redux-thunk。如果还没有看过我之前关于redux介绍的可以参照

传送门

里面的sample4就是关于redux-thunk的。

redux-thunk就是redux的中间件，中间件就是你可以在收到请求和返回请求之间做一些操作。
而thunk中文意思是形实转换程序， 这样可能不太好理解我们来看例子。

// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;

// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;

这是官方给出来的例子，我们可以大致理解为当一个操作被delay的时候我们可以称之为thunk。

A thunk is a function that returns a function.

This is a thunk.

而redux-thunk恰恰正好就是来做这个事的。

因为action函数只能返回action对象, 而redux-thunk可以通过返回的函数延迟dispatch或者在指定条件下才dispatch。这个函数接受store的两个方法dispatch和getState。

例如调取api。

首先我们要

npm install redux-thunk

sample4的版本为4.0.1

第一步我们要在index.js中让middleware可用。

我们将使用到compose和applyMiddleware
compose 其作用是把一系列的函数，组装生成一个新的函数，并且从后到前，后面参数的执行结果作为其前一个的参数。compose(f, g, h) is identical to doing
(...args) => f(g(h(...args))).

applyMiddleware 最常见的使用场景是无需引用大量代码或依赖类似 Rx 的第三方库实现异步 actions。这种方式可以让你像 dispatch 一般的 actions 那样 dispatch 异步 actions。

import { applyMiddleware, compose, createStore, combineReducers } from 'redux'; // 引入combineReducers, applyMiddleware

然后先使用compose连接到一起在放在store里面

const allStoreEnhancers = compose(
  applyMiddleware(thunk),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
) // 其作用是把一系列的函数，组装生成一个新的函数，并且从后到前，后面参数的执行结果作为其前一个的参数。

const store = createStore(
  allReducers,
  {reducer1:[1], reducer2:[2], reducer3:[3]}, // 替换为allReducers 并且设置初始state 作为第二个参数
  allStoreEnhancers
);  

如果像官方文档一样不使用compose也可以

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

接下来在action里我们就可以异步返回一个函数

这里用到axios

// 添加一个方法返回一个函数
export function getRequest() {
  return dispatch => {
    axios({
      method: 'get',
      url: 'https://randomuser.me/api',
    })
    .then((res)=>{
      const action = {
        type: UPDATE_REQUESTNAME,
        payload:{
          reducer3: res.data.results[0].email
        }
      }
      //dispatch(action)
      return action
    })
    .catch((err)=>{
      console.log(err)
    })
  }
}

在redux-thunk 2.1.0之后的版本中我们可以注入自定义参数

需要用的withExtraArgument方法

就是在thunk后面调用

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// later
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

多个参数的话就要使用解构

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ api, whatever }))
)

// later
function fetchUser(id) {
  return (dispatch, getState, { api, whatever }) => {
    // you can use api and something else here
  }
}