Redux笔记

最新推荐文章于 2023-06-08 20:00:00 发布

萝卜-兔子

最新推荐文章于 2023-06-08 20:00:00 发布

阅读量440

点赞数

分类专栏： Redux 文章标签： Redux

本文链接：https://blog.csdn.net/abcwangruili/article/details/78019714

版权

Redux 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

在上图中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只支持同步数据流。