Redux笔记
在上图中View指的是展示组件,而相对应的是容器组件,其运用store.subscribe()将展示组件和Redux关联起来。
1. 容器组件使用store.subscribe()从Redux的state树中读取部分数据,并通过props来把这些数据提供给要渲染的组件(展示组件)。可以手工来开发容器组件,也可以运用React-Redux库中的connect()【将Redux数据(dispatch(action)发起的动作)通过props同步给React】方法生成。
2. 使用connect()前,需要先定义mapStateToProps()(该函数的第一个参数可以是一个对象,用来表示Store中整体的state数据,如果第一个参数是一个函数,则表示自身拥有的属性,最后返回的是传给React组件的数据)函数来指定如何把当前Redux-Store-State映射到展示组件中。
3.除了读取state, 容器组件还能分发action。可以定义mapDispatchToProps()方法接收dispatch()方法并返回期望注入到展示组件的props中的回调方法。
4.所有容器组件都可以访问Redux Store, 所以可以手工监听它。一种方式是把它以props方式传入到所有容器组件中,但这样太麻烦了,因为必须要用Store把展示组件包裹一层。因此可以使用指定的Redux组件provider()来让所有容器组件都可以访问Store,而不必显示地传递它,只需要在渲染根组件时使用即可。
在Redux中action描述“发生了什么”:只能表达想要修改的意图,Reducers指明应用如何根据action更新state,而store就是把action和Reducers联系到一起的对象
Action
action描述“发生了什么”。本质上是一个普通对象,必须使用一个字符串类型的type字段来表示将要执行的动作。
- action创建函数就是生成action的方法,只是简单地返回一个action。在Redux中,只需把action创建函数返回的action传给dispactch()方法即可发起一次dispatch过程或创建一个被绑定的action创建函数来自动dispacth。store.dispacth(action)是改变store中的state的唯一方法。
Reducer
指明应用如何根据action更新state, 采用 (state, action) => state模式
- combineReducers()所做的只是生成一个函数,此函数来调用一系列reducer。每个reducer根据它们的key来筛选出state中的一部分数据并处理,然后这个生成的函数再将所有reducer的结果合成一个大的对象。如果combineReducers()中包含的所有reducers都没有更新state,那么也就不会创建一个新有对象。
- slice reducer: 负责处理状态树中一块切片数据的函数,通常会作为combineReducers函数的参数。
- case function 负责处理特殊action的更新逻辑的函数,可能就是一个reducer函数,也可能需要其他参数才能正常工作。
- sub-reducer 表示那些不是root reducer的任何函数。
Store
Redux应用只有一个单一的store,其保存了应用中所有的state对象,且可以运用createStore(reducers)方法生成生成应用中唯一的store。由于createStore()只接收一个reducer作为参数,所以就需要我们运用combineReducers()将多个reducer合并成一个reducers。如果生成store时没有使用middleware,则生成的store只支持同步数据流。
store职责
- 维持应用的state
- 提供getState()方法获取state
- 提供dispatch(action)方法更新state:将action传到store
- 通过subscribe(listener)注册监听器
- 能过subscribe(listener)返回的函数注销监听器
- replaceReducer(nextReducer): 更新当前store里的reducer, 一般只会在开发模式中调用该方法
react-redux库
react-redux库是Redux官方提供的React绑定:react-readux提供一了个组件()和一个API(connet())。接受一个store作为props, 是整个Redux应用的顶层组件,而connet()提供了在整个React应用的任意组件中获取store中的数据的功能。