阅读 61

React-redux

一、reducex的作用(为什么要用)

1、js 开发的应用程序变得原来越复杂,需要管理的状态数据变得越来越多。比如要管理的状态的有:服务器返回的数据、缓存的数据、用户操作产生的数据

2、管理状态变得越来越复杂

状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化; 当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪

3、react 是在视图层帮助我们解决了DOM的渲染过程,但是State依然是留给我们自己来管理。当组件之间的状态依赖不是很多时,状态变化也不是很复杂时,我么就可以通过 react 本身来进行状态管理,但是当着写都变得复杂时,就需要使用到 redux 来进行状态的管理了。

二、redux三大原则

单一数据源

  • 整个应用程序的state被储存在一颗object three中,并且这个object three只存储在一个store中
  • 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改

State是只读的

  • 唯一修改State的方法一定是触发action(一个用于描述已发生事件的普通对象),不要试图在其他地方通过任何的方式来修改State
  • 这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state
  • 这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题

使用纯函数来执行修改

  • 通过reducer将 旧state和 actions联系在一起,并且返回一个新的State
  • 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分
  • 但是所有的reducer都应该是纯函数,不能产生任何的副作用

三、redux的基本使用

1、安装

一、先安装react

npx create-react-app 项目名字(不能大写,不能是数字)
复制代码
   1. yarn add redux
   2. npm install redux
复制代码

2、目录划分

image.png

3、具体内容

store/index.js image.png store/reducer.js image.png src/TodoList.js image.png src/App.js

image.png

总结:redux流程

用户通过界面组件触发TodoList里面的mapDispatchToProps,携带Store中旧State与Action流向Reducer,Reducer返回新的state,并更新界面。

文章分类
阅读
文章标签