一直不理解redux里面的createStore,是所有的state都放到这个里面?然后更不理解getState这个函数,获取当前state的值,createStore里面只有一个state?不然怎么获取一个
一直不理解redux里面的createStore,是所有的state都放到这个里面?然后更不理解getState这个函数,获取当前state的值,createStore里面只有一个state?不然怎么获取一个
store就像人的一生,包括了所有的东西。
createStore就像人出生,从这一刻开始存在了。
store.getState()则像是拍一张照片,可以获取当前的信息。
store.getState()得到的是一个能完全描述一个人的现在的样子的一个状态树,也就是一个对象。
每一个属性都描述了这个人的一部分信息,比如年龄,现在的穿着等,这些信息合起来就能完整描述人的信息,如果科技像西部世界一样发达,根据这些信息是完全可以造出来一个人的。
Redux
是一个状态管理的框架。采用的是订阅者模式的思想。
创建store
。传入参数为一个纯函数(pure function
),即为reducer
,其作用就是将action
映射成对应的state
,比如一个ADD_ACTION
映射为state+1
调用store.subscribe(fn)
来注册订阅状态的变化。每当action
触发state
的变化,就会将新的状态传入fn
函数中。比如在React
中fn
可以用来调用Component的setState(obj)
函数,做到更新组建。
能更新state
的操作就只有action
。通过调用store.dispatch(action)
函数来更改状态。
createStore(reducer) --> store.subscribe(fn) --> store.dispatch(action) -->fn(newState)
多看官方文档,一遍不懂再多看几遍(官方文档非常好)
实践redux
官方视频:getting-started-with-redux 和 building-react-applications-with-idiomatic-redux
视频非常好,建议先完成前两步,再回头看视频,你会一下子懂很多了~
提升篇:
flux单向数据流的概念,然后Flux,Reflux,Redux库的对比,Redux的架构思想(很多借鉴了ELM)
阅读源代码
实践实践再实践
// 做些准备工作(创建reducers, store)
const reducer1 = (state = {a: ''}, action) => { /* 具体实现省略 */ }
const reducer2 = (state = {b: 0}, action) => { /* 具体实现省略 */ }
const rootReducer = combineReducers({
reducer1,
reducer2,
});
const store = createStore(rootReducer);
/* 这个时候的全局state
* state = {
reducer1: {a: ''},
reducer2: {B: 0},
}
*/
const state = store.getState();
state
会这样子的先说说combineReducers
这个函数, 这个函数大概是长成下面的样子(简化了很多)
/*
* 记住这里的reducers是一个对象
* 键就是我们最后getState()得到的state的键
* 值是我们的'子reducer'
*/
function combineReducers(reducers) {
return function reducer(state, action) {
// 遍历reducers中的所有reducer,依次执行每个reducer,所有执行的reducer参数均为(state, action),并更新state上对应key上的值
for (let reducerKey of reducers) {
const reducerFn = reducers[reducerKey];
state[reducerKey] = reducerFn(state, action);
}
// 执行完所有的reducers后,返回更新后的state
return state;
}
}
要理解redux
, 理解上面的函数很重要, 更重要的是从上面的函数里明白一点:
redux
通过combineReducers
将所有子reducer
结合起来,以至于每次dispatch
一个action
的时候,所有的reducer
都会执行一遍, 并且action
这个参数都是一致的
接着说说createStore
,刚才说了combineReducers
其实返回的是一个rootReducer
,那么getState
得到的state
, 实际上可以看成state = rootReducer(preState, action)
.
最后说一句, 关于state
的黑魔法其实就在combineReducers
这个函数上, 楼主有空可以去看看源码上的这个方法, 而它的核心思想就是我上面列的那段代码.
store里面只存在一个state,可以通过store.getState()方法获取,reducer是一个纯函数,其实就是重新生成state的过程,生成之后返回存储于store中。
相当于store是一个流水线工人(先创建一个工人:createStore(reducer)
),手头上有加工的工具(reducer
),上游工位只要有加工品(state
)下来(action
),他就拿过来用工具(reducer
)加工后传给下个工位(store.dispatch()
,自动触发reducer
处理后返回新的state
),做完一个加工品就提醒一下(store.subscribe()
监听函数,state
变化时触发)。在产线上任何一个工位都可以检查加工品(store.getState()
)
个人理解的比喻,可能有点偏差
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
我也是刚学没多长时间,可以告诉我的理解
第一点,你的state都放在reducer里面,reducer也可以做拆分,把不同页面的state初始化
当你createStore的时候,把reducer绑定到store上面,就是可以获得所有的state
如果你不想获取全部的state,可以在组件中使用
function mapStateToProps(state) {
}
通过使用不同的reducer来绑定不同的state
最后通过connect方法把state和action绑定到组件上面。