Redux中间件及其开发者工具_redux开发者工具

一、redux中间件(redux-thunk)

redux里，action仅仅是携带了数据的普通js对象。action creator返回的值是这个action类型的对象。然后通过store.dispatch进行分发，同步的情况下一切都很完美，但是reducer无法处理异步的情况。
那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是middleware

安装命令: npm i redux-thunk

在你创建的store.js中去引入使用：

import { applyMiddleware, combineReducers, createStore } from "redux";
import TabbarReducer from "./reducers/TabbarReducer";
import reduxThunk from "redux-thunk"

const reducer = combineReducers({
    TabbarReducer
})

const store = createStore(reducer, applyMiddleware(reduxThunk));

export default store; 
1
2
3
4
5
6
7
8
9
10
11

异步的话那么这个中间件将起作用，如果是同步的话还是走同步。

那么你在actionCreator中如果写成异步的话必须写成返回一个函数，并且这个函数带有一个参数dispatch，在你异步获取到数据是进行dispatch，并用payload将你需要传到参数传过去即可。如下示例：

function getCinemaListAction() {
    return (dispatch) => {
        axios({
            url: '...',
            method: 'get/post',
            headers: {}
        }).then((res) => {
            dispatch({
                type: 'cinemalist',
                payload: res.data
            })
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

reducer中去判断取值：

然后去需要的页面去订阅取值：

订阅问题，在redux中每次发布的时候，会把所有订阅的东西拿出来执行，这样的话完全没必要，我们可以在当前组件销毁的时候取消订阅，如下写法：

---

二、redux中间件(redux-promise)

安装命令: npm i redux-promise

在store.js中引入：
react-thunk和react-promise写法上不同，功能上一样：
react-promise返回一个promise：

三、Redux开发者工具

Redux DevTools Extension

在store.js中配置：

import { applyMiddleware, combineReducers, createStore, compose } from "redux";
import TabbarReducer from "./reducers/TabbarReducer";
import reduxThunk from "redux-thunk"
import reduxPromise from "redux-promise"

const reducer = combineReducers({
    TabbarReducer
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(reduxThunk, reduxPromise)
));

export default store; 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样配置完之后，在调试器哪里就有状态了：

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。