简单实现react-thunk中间件

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

redux中dispatch只允许我们最终传入action对象（{type: ..., ...}）。 利用react-thunk中间件，我们可以传入函数（执行异步操作），再将异步操作的结果dispatch。

//在redux中引入react-thunk中间件
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

import reducer from './reducer';

const storeEnhancer = applyMiddleware(thunkMiddleware);
const store = createStore(reducer, storeEnhancer);

export default store;

//具体使用

//index.js
useEffect(() => {
 dispatch(getNewAlbumAction(10))
}, [dispatch])
  
//actionCreators.js
export const getNewAlbumAction = (limit) => {
  return dispatch => {
    getNewAlbum(limit).then(res => {
      dispatch(changeNewAlbumAction(res))
    })
  }
}

可以看到利用中间件，我们可以对原本的东西进行增强，中间件的架构、实现值得我们去学习。