React-Redux入门
1、概念
- react只是一个轻量级的视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用
- redux组件之间的传值非常简单,redux里面要求我们把数据都放在一个公共的存储区域store里面,组件之中尽量少放数据,也就是所有数据都不放在组件自身了,都把它放到一个公用的存储空间里面,然后组件改变数据就不需要传递了,改变store里面的数据之后其它的组件会感知到里面的数据发生改变。这样的话不管组件的层次有多深,但是走的流程都是一样的,会把数据的传递简化很多。
2、Redux的工作流程
5,Action和Reducer的作用
1)要想更新state中的数据,首先派发一个action,action通过dispatch方法传给store。
2)store把之前的数据previousState和传过来的action转发给reducers函数。
3)reducers接收state和action后进行数据处理,重新生成一个newState(原state只读不改),把newState作为返回值返回给store。
4)store接收newState,将新数据替换原来的数据。
5)react组件中观测到数据发生改变(store.subscribe),会从store里面重新取数据(state),更新组件的内容,页面发生变化。
actionTypes 拆分管理,统一管理,方便排错
使用actionCreator统一创建action
6、redux知识点
-
redux三个基本原则:
①:store必须是唯一的
②:只有store可以改变自己的内容
③:reducer 必须是纯函数 -
只有store能改变自己内容说明在reducer里我们不能直接操作state,只能通过定义新变量copy state的值,
然后对新变量进行操作并 return 出新变量,不允许直接改变state。 -
什么是纯函数?
给固定的输入,就一定会有固定的输出,并且不会有任何副作用。
所以对于异步函数(定时器、ajax数据请求等)、动态时间都不适意在reducer里订阅。 -
store核心api:
crerteStore(): 创建一个store
store.dispatch(action): 派发action,传递store
store.getState(): 获取store的所有数据
store.subscribe(): 订阅store的变化,接收的回调函数在store改变时候就会自动执行
参考: https://blog.csdn.net/qq3399013670/article/details/93332598
https://blog.csdn.net/Rance_King/article/details/106317917
Redux 入门教程(一):基本用法 ( 阮一峰)
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
好的参考:https://segmentfault.com/a/1190000010851224