Redux 和 Redux thunk 理解
1: state 就像 model
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
2: action, 普通的 javascript 对象, 用来描述发生了什么, 里面除了type 必须的, 还会其它属性值来改变 state。
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
3. 为了把 action 和 state 串起来, 就是 reducer, 例如下面:
reducer 一定是对应于 action 里的 type 的值, 而做变化。
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
default:
return state;
}
}
Redux thunk 到底是怎么起作用的呢, 请看下面的代码:
const store = createStore(reducer, preloadedState, applyMiddleware(thunk));
当执行这个代码的时候, 实际执行了 applyMiddleware(thunk)(createStore)(reducer, preloadedState),
这个会返回一个新的 store对象, 这个 store对象的dispatch 发生了变化。
源码里首先定义原来的 store = createStore(reducer, preloadedState);
然后 thunk 里面传递下面的对象:
{
getState: store.getState,
dispatch: (action) => dispatch(action)
}
再传入原来的 store.dispatch(就是next),
返回的函数就是新的 dispatch方法:
action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
}
所以当你执行, 下面的方法判断 action 是否是函数,
dispatch( incrementAsync() );
注意下面标红的 dispatch 跟 store.dispatch 一样,所以又重新执行了1遍 dispatch = compose(...chain)(store.dispatch);
但是这个时候的 action 已经是 increment(), 不是函数了, 所以直接走到 next(action) 里面了。
function incrementAsync(delay = 1000) {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, delay);
};
}
Redux thunk 官网源码
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
//注意这里 dispatch 不用 next?
return action(dispatch, getState, extraArgument);
}
// 注意这里 next 不用 dispatch
return next(action);
};
} const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware; export default thunk;
applyMiddleware 源码如下:
import compose from './compose' // 这货的作用其实就是 compose(f, g, h)(action) => f(g(h(action))) export default function applyMiddleware(...middlewares) { return function(createStore) { return function(reducer, preloadedState, enhancer) { // 用原 createStore 先生成一个 store,其包含 getState / dispatch / subscribe / replaceReducer 四个 API
var store = createStore(reducer, preloadedState, enhancer) var dispatch = store.dispatch // 指向原 dispatch
var chain = [] // 存储中间件的数组 // 提供给中间件的 API(其实都是 store 的 API)
var middlewareAPI = {
getState: store.getState,
// 注意这里面的 dispatch 已经变成下面的 dispatch 了
dispatch: (action) => dispatch(action)
} chain = middlewares.map(middleware => middleware(middlewareAPI)) // 用原来的 store.dispatch 进行窜连
dispatch = compose(...chain)(store.dispatch) return {
...store, // store 的 API 中保留 getState / subsribe / replaceReducer
dispatch // 新 dispatch 覆盖原 dispatch,往后调用 dispatch 就会触发 chain 内的中间件链式串联执行
}
}
}
}
Redux 和 Redux thunk 理解的更多相关文章
- React-安装和配置redux调试工具Redux DevTools
chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- 手把手教你撸一套Redux(Redux源码解读)
Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...
- 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息
redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...
- [Redux] Understand Redux Higher Order Reducers
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- 理解Redux以及如何在项目中的使用
今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章: http://www.ruanyifeng.com/blog/20 ...
- Redux 中间件的执行顺序理解
Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...
- 【React】360- 完全理解 redux(从零实现一个 redux)
点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...
随机推荐
- free命令buff和cache的区别
[root@iz8vb8kca7twx6177bqg0fz ~]# free -h total used free shared b ...
- 【Luogu】P3933 Chtholly Nota Seniorious
[题意]将n*m矩阵分成两个区域,要求满足一定条件,求两区域内部极差较大值最小.n,m<=2000 [算法]二分 [题解]极差的数值满足单调性,所以考虑二分极差. 对于给定的极差,将所有数值排序 ...
- Spring+SpringMVC+MyBatis整合(山东数漫江湖)
Spring+SpringMVC+MyBatis(SSM)在我们项目中是经常用到的,这篇文章主要讲解使用Intellij IDEA整合SSM,具体环境如下: 数据库:MySQL5.7 依赖管理:Mav ...
- Codeforces Round #482 (Div. 2) B题
题目链接:http://codeforces.com/contest/979/problem/B B. Treasure Hunt time limit per test1 second memory ...
- php中比较好用的函数
PHP中一个好用的函数parse_url,特别方便用来做信息抓取的分析,举例子如下: $url = "http://www.electrictoolbox.com/php-extract-d ...
- 跨域iframe高度计算
一.同域获取iframe内容 这里有两个细节: 1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性. 2. cal ...
- Python ctypes 在 Python 2 和 Python 3 中的不同 // 使用ctypes过程中问题汇总
In Python 2.7, strings are byte-strings by default. In Python 3.x, they are unicode by default. Try ...
- pandas中DataFrame使用
切片选择 #显示第一行数据print(df.head(1)) #显示倒数三行数据 print(df.tail(3)) loc df.loc[row_index,col_index] 注意loc是根 ...
- OGRECave [www]
OGRECave https://github.com/OGRECave
- 105.Construct Binary Tree from Preorder and Inorder Traversal---《剑指offer》面试6
题目链接 题目大意:根据先序遍历和中序遍历构造二叉树. 法一:DFS.根据模拟步骤,直接从先序和中序数组中找值然后加入二叉树中,即先从先序数组中确定根结点,然后再去中序数组中确定左子树和右子树的长度, ...