redux-thunk 安装使用，以及redux-devtools配置

devtools

vuejs/devtools: Vue.js 开发者工具，这是一个浏览器插件，可以安装在 Chrome 和 Firefox 等现代浏览器中，用于调试 Vue 应用程序，提供了组件树查看、状态快照、时间旅行等高级调试功能。

项目地址：https://gitcode.com/gh_mirrors/de/devtools

免费下载资源

Yin_Xiaobo

3145人浏览 · 2018-10-12 14:41:55

Yin_Xiaobo · 2018-10-12 14:41:55 发布

关于 redux 中间件使用的简单记录
可以在 github 搜索 redux-thunk || redux-devtools || redux-devtools-extension 查看文档

在项目安装 redux-thunk。

yarn add redux-thunk || npm install redux-thunk --save

在创建 redux 时,使用 redux, redux-thunk 配置redux-devtools

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);

const store = createStore(reducer, enhancer);

export default store;

在 actionCreator 创建 action ，就可以使用函数作为返回值了

export const getTodoList = () => {
  // 这里可以接收 dispatch 参数，直接使用，相当于调用 store.dispatch 方法
  return (dispatch) => {
    axios.get('/api/todolist')
      .then((res) => {
        const data = res.data
        const action = getInitListAction(data)
        dispatch(action)
      })
      .catch((error) => {
        console.log(error)
      })
  }
}

在 componentDidMount 钩子函数中调用 action

  componentDidMount() {
   const action = getTodoList()
   store.dispatch(action)
  }

redux 接收传值，处理改变 state

export default (state = defaultState, action) => {

  if (action.type === INIT_LIST_ACTION) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list = action.data;
    return newState;
  }
  
  return state;
}