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

原文地址:https://www.cnblogs.com/yizhilin/p/14090371.html