React的thunk中间件

在React中，thunk是一种中间件，主要用于Redux中处理异步操作。它本质上是一个函数，这个函数可以接收一个dispatch方法作为参数并返回一个新的函数，这个新的函数会在将来的某个时间点调用dispatch方法。

以下是一个简单的thunk的例子，它将在一定的延迟后增加一个值：

// action-types.js
export const INCREMENT = 'INCREMENT';
 
// action-creators.js
export const increment = () => ({ type: INCREMENT });
 
// thunk.js
export const incrementAfterDelay = (delay = 1000) => (dispatch) => {
  setTimeout(() => {
    dispatch(increment());
  }, delay);
};
 
// reducer.js
const initialState = 0;
export default (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
};
 
// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
 
const store = createStore(reducer, applyMiddleware(thunk));
 
// 使用thunk
store.dispatch(incrementAfterDelay(2000)); // 2秒后state增加1

在这个例子中，我们创建了一个thunk，它将在指定的延迟后调用increment action。这个thunk被用在一个简单的Redux store中，该store的state初始值为0，并且有一个action和reducer用来增加这个值。通过调用incrementAfterDelay，我们可以在2秒后看到state的值增加。