redux作用和应用场景
首先,redux不是必须的,它的作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信。如果组件之间没有很多互动,视图层只从单一来源获取数据,只是单纯进行视图渲染,就没必要使用redux,这样反而会影响开发速度。 但如果组件之间需要进行频繁通信,多个用户之间进行协作,比如以下场景: 1.某个组件状态需要共享 2.某个状态需要在任何地方都可以拿到 3.一个组件需要改变全局状态 4.一个组件需要改变另一个组件的状态 以上都是Redux适用的场景:多交互、多数据源。
redux组成
它主要由三部分组成:store,reducer,action
store
store是用来保存数据的地方,redux应用只有一个单一的store,可以根据createStore这个函数生成store。
它接收一个函数作为参数,返回新生成的store对象。
store的主要方法
getState
store是保存了所有的数据,如果想获取某个时间点的数据,就要通过store.getState()拿到,state也就是某个时间点的数据集合。一个state对应这一个view,两者互相关联。
dispatch
dispatch是用于对action的分发,它接收一个Action对象作为参数,将他发送出去。
subscribe
使用store.subscribe方法设置监听函数,一旦监听到state发生变化,就执行传入的函数。
store.subscribe方法返回一个函数,调用这个函数可以解除监听。
action
state和view要相应发生改变,用户是直接接触到view,如果要state也随着用户对view的更改发生变化是,则需要view向state发出一个通知,这个通知也就是action。它是一个对象,下面包含一个必须属性type,这表示他的名称,其他属性可以自由设置。
如果要发送多个action,可以通过Action Creator来生成。
reducer
reducer是指定了应用状态的变化如何响应action并发送到store,返回一个新的state,对state的计算过程就叫做reducer。它接受action和当前的state作为参数。
由之前我们生成store的方法,调用reducer时可以直接将reducer传入createStore方法里。因为store.dispatch方法会触发reducer的自动执行,只要action发出新通知,就会得到新的state。
combineReducers
redux提供了一个combineReducers方法用于reducer的拆分,它接受整个state和一个action,然后将整个state拆分发送给对应的reducer处理,所有的reducer根据action的type不同进行接收处理返回新的state,没有就返回默认值,然后分散的state再整合一起返回一个新的state树。
redux工作流程
由图可知,首先用户改变view发出action,store自动调用reducer,返回新的state(new state),state一旦发生变化,store就会调用监听函数subscribe,通过getState得到当前状态,触发重新渲染view。
component --> dispatch(action) --> reducer --> subscribe --> getState --> component