redux的 combineReducers 和 createStore 的实现原理
2017-05-01 15:52
429 查看
最近一直在学习 redux, 感到了深深的难过,都两天了,感觉还是不知道怎么写代码,倒不是不知道是Redux 里面涉及的概念,是不知道什么代码该放在哪里。怎么样组织结构。希望再过两天能更清晰。
下面是中间学习到的 combineReducers 和 createStore 的实现原理,了解这些后,确实帮助了我更好的理解整个流程。
combineReducers 的实现原理
在探究
这里为了逻辑上的分离,我们把
然后利用了
先看下我们的 todos 和 visibilityFilter 是这样的:
我们的 reducers 也是跟这里的每一个分 reducer 一样,都是函数,都要通过传入 (state, action) 来唯一判断下次的状态。所以我们
可以传入 (state, action) 两个值来判断 next 的 state 的值的函数。
所以这下我们就可以理解下面的代码,
其中Object.key()方法:
Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用
(两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
Object.key(reduces)会把reduces转成数组。如下
(["visibilityFilter", "todos"])
再用reduce方法遍历数组中的元素把对应的数据组装好。
var state=[];
var action=[];
var todos = (state = {id:"tangzhl",age:"18"}
, action) => {
switch (action.type) {
case 'ADD_TODO':
return action.filter
case 'TOGGLE_TODO':
//...
default:
return state
}
}
//visibilityFilter
var visibilityFilter = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
var todoApp = {
visibilityFilter,
todos
};
// todoApp
console.log(Object.keys(todoApp));
let sdf = Object.keys(todoApp).reduce(
function ss(nextState,key){
//在对象中添加对应的state和action
nextState[key] = todoApp[key](
state[key],
action
);
return nextState;
},{}
)
console.log(sdf);
当我们形成了新的 reducer 以后, 传入任何 的 action 和 status 就会返回一个明确的 状态树了。可能是下面这个样子的:
createStore 的实现原理
同样我们先看下 createStore 的用法:
createStore 通过传入 我们的 reducer 形成一个全局唯一的 store, 这个形成的 store 是一个对象,它有3个方法,分别是:
所以其实我们就是要编辑一个函数,这个函数里面可以有这三个方法暴露给我们使用。原理如下:
可以看到我们是先实现了这三个方法。下面简单看下怎么用这三个方法:
NO
COMMENTS
下面是中间学习到的 combineReducers 和 createStore 的实现原理,了解这些后,确实帮助了我更好的理解整个流程。
combineReducers 的实现原理
在探究
combineReducers的实现原理之前,先看下
combineReducers的用法:
const todoApp = combineReducers({ visibilityFilter, todos });
这里为了逻辑上的分离,我们把
reducers拆分成了
visibilityFilter和
todos,
然后利用了
combineReducers合成了一个
reducer。
先看下我们的 todos 和 visibilityFilter 是这样的:
//todos const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': //... case 'TOGGLE_TODO': //... default: return state } } //visibilityFilter const visibilityFilter = (state = 'SHOW_ALL', action) => { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.filter default: return state } }
我们的 reducers 也是跟这里的每一个分 reducer 一样,都是函数,都要通过传入 (state, action) 来唯一判断下次的状态。所以我们
combineReducers的作用就是重新生成一个
可以传入 (state, action) 两个值来判断 next 的 state 的值的函数。
所以这下我们就可以理解下面的代码,
combineReducers的实现:
const combineReducers = ( reducers ) => { return ( state = {}, action ) => { return Object.keys(reducers).reduce( ( nextState, key ) => { nextState[key] = reducers[key]( state[key], action ); return nextState; }, {} ); }; }; export default combineReducers;
解释下:首先是返回一个可以传入两个参数的函数。所以我们先 return 一个 function, 然后再通过 reduce 函数,遍历每一个 key 值, 然后为对应的 state 赋值为新的函数。
其中Object.key()方法:Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用
for...in循环遍历该对象时返回的顺序一致
(两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
Object.key(reduces)会把reduces转成数组。如下
(["visibilityFilter", "todos"])
再用reduce方法遍历数组中的元素把对应的数据组装好。
var state=[];
var action=[];
var todos = (state = {id:"tangzhl",age:"18"}
, action) => {
switch (action.type) {
case 'ADD_TODO':
return action.filter
case 'TOGGLE_TODO':
//...
default:
return state
}
}
//visibilityFilter
var visibilityFilter = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
var todoApp = {
visibilityFilter,
todos
};
// todoApp
console.log(Object.keys(todoApp));
let sdf = Object.keys(todoApp).reduce(
function ss(nextState,key){
//在对象中添加对应的state和action
nextState[key] = todoApp[key](
state[key],
action
);
return nextState;
},{}
)
console.log(sdf);
当我们形成了新的 reducer 以后, 传入任何 的 action 和 status 就会返回一个明确的 状态树了。可能是下面这个样子的:
{ visibilityFilter: 'SHOW_ALL', todos: { id: 0, text: 'Hello world', completed: false } }
createStore 的实现原理
同样我们先看下 createStore 的用法:
//let { subscribe, dispatch, getState } = createStore(reducer); import { createStore } from 'redux'; const store = createStore(reducer)
createStore 通过传入 我们的 reducer 形成一个全局唯一的 store, 这个形成的 store 是一个对象,它有3个方法,分别是:
store.dispatch() store.subscribe() store.getState()
所以其实我们就是要编辑一个函数,这个函数里面可以有这三个方法暴露给我们使用。原理如下:
const createStore = ( reducer ) => { let state; let listeners = []; const getState = () => state; const dispatch = ( action ) => { state = reducer(state, action); listeners.forEach(listener => listener()); } const subscribe = ( listener ) => { listeners.push(listener); return ()=>{ listeners = listeners.filter(l => l !== listener) } } dispatch({}); return { getState, dispatch, subscribe } }
可以看到我们是先实现了这三个方法。下面简单看下怎么用这三个方法:
const {createStore} = Redux; const store = createStore(reducer); const render = () => { document.body.innerHTML = store.getState(); } store.subscribe(render) render(); document.addEventListener('click', ()=>{ store.dispatch({type:'INCREMENT'}); })
NO
COMMENTS
相关文章推荐
- Redux 中 combineReducers 和 createStore的实现原理
- Redux 中 combineReducers 和 createStore的实现原理
- Redux之combineReducers(reducers)详解
- redux的reateStore,combineReducers,bindActionCreators,applyMiddleware源码分析
- [Redux] Reducer Composition with combineReducers()
- Redux源码分析之combineReducers
- Redux之combineReducers(reducers)详解
- 简析reat-redux实现原理和源码
- react-redux高阶组件connect方法使用介绍以及实现原理
- [Redux] Implementing combineReducers() from Scratch
- 浅析redux-saga实现原理
- redux教程(二)redux的相关示例以及实现原理
- .NET 2.0 中 GetDelegateForFunctionPointer 函数实现原理浅析 [草稿]
- P2P之UDP穿透NAT的原理与实现 [转]
- P2P 之 UDP穿透NAT的原理与实现-转自CSDN[hBifTs]
- C# 2.0 中Iterators的改进与实现原理浅析
- 利用泛解析实现二级域名原理以及程序
- 一个小语言的词法分析程序原理及其实现(2)
- .NET 1.1中预编译ASP.NET页面实现原理浅析 [1] 自动预编译机制浅析
- 基于IMD的包过滤防火墙原理与实现