之前前端的技术栈偏向vue,针对整个生态圈环境,认为确实非常有必要看一下react,
确实react的生态圈是vue没法相比的,并且react native也对我非常有意义.
在阅读react技术文档过程中,redux相对理解的时间花费了长了一点.在这里记录一下,加深印象.
Redux提供一个createStore函数来生成一个Store
createStore接受第一个参数为function(我们叫做reducer),为了便于理解,以后再说后面的参数
reducer函数接受两个参数,
第1个是state,即当前store中存储的数据对象,可以有一个默认值.
第2个是action,是一个object对象,必须要有type属性,其他属性随意.
这个function的功能是根据对应type值,做出不同的处理,生成一个新的state被Store存储.
接下来我们在需要做出动作改变数据的地方,使用store.dispath(action)
这里的action就是之前createStore中的reducer的第2个参数.(当然按照规定也要有一个type属性)
当我们调用store.dispath的时候,Redux会自动去调之前我们传入的function,通过不同的type去做不同的处理,最后Store会根据reducer返回的对象生成一个新的store
最后,还有一个最重要的store.subscribe函数,他用来注册需要监听的函数.当store中的state数据发生了变化时,他会自动调用所有注册过的函数,在注册的函数内部可以通过store.getState()获取数据快照,来对组件进行渲染.
当程序庞大到一定程度时,单个reducer函数会变的非常庞大,Redux提供了combineReducers的方法.通过传入一个对象,对象中包裹多个reducer(多个reducer一般是分多个js去编写),来生成一个整体的reducer函数.使得程序维护变的简单.
React-Redux则变的简单很多.
他主要提供2个功能,
- Provider 组件
Provider组件可以把传入的store对象,传给他下面的所有子组件.并且注册组件的render函数.省去我们手动注册的过程(就是说我们可以忘记subscribe函数) - connect方法
connect是一个高阶组件,他接收2个参数,第一个为映射的state,可以用他来返回你想要的筛选处理过后的state,一个是映射dispatch 用来映射你容器内需要用到的生成action的方法.
最终他会返回一个函数,通过这个函数调用传入你的原始容器,将会生成一个新的容器,这个容器的props会注入你所有映射的state和映射的dispatch,来方便你使用.