React 07 中间件 + Redux调试

中间件

• 执行时机： 到达reducer之前
• 如何配置：

import thunk from 'redux-thunk'
export default createStore(rootReducer , applyMiddleware(thunk))

• 使用：

import request from '../../utils/request'
import { NEWS_GET } from '../constants'

export const newsGetAc = (payload) => ({
  type: NEWS_GET,
  payload,
})
export const newsGet = (id) => {
  return async (dispatch) => {
    const { data } = await request.get(
      `articles?channel_id=${id}&timestamp={Date.now()}`
    )
    dispatch(newsGetAc(data.data.results))
  }
}

Redux 调试

• （1） 安装工具 redux-devTools
• （2） 在代码中进行激活

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
// 开启 Redux 调试工具的
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers'
export default createStore(
 rootReducer,
 composeWithDevTools(applyMiddleware(thunk))
)