React大项目

redux

主要内容

1. React数据传递

2. redux

3. React-redux

4. 其他

学习目标

第一节 react数据传递

react 中组件之间数据传递

1. 父传子

2. 子传父(状态提升)

3. 兄弟之间传递

需要把数据上传到共有的父级身上，然后再通过父级向下传，传到指定的子级上

本节作业

1. 兄弟元素之间数据传递

2. 两个具有共同祖先级的元素之间数据传递

第二节 redux

1. 介绍：

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。redux能统一管理数据，只要redux中的数据发生改变了，所有使用redux中数据的地方都会改变。redux有自己的一套操作标准。

2. 使用

1. 安装：

使用react时安装：

2. 三大原则

1.单一数据源

​ 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

2.使用纯函数来执行修改

​ 如何改变 state tree ，你需要编写 reducers。它接收先前的 state 和 action，并返回新的 state

3.State 是只读的

​ 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

​ 执行上面纯函数。

3. 核心

1. Action

2. Reducer

业务流程：

3. Store

4. 基本使用

React全家桶

本节作业：

1. 理解redux核心

2. 创建一个redux数据

第三节react-redux

1. 安装：

2. 使用

1. redux 核心代码都不变

2. 连接react

1. 关联整个react项目 index.js

2. 某个组件关联store

3. 页面中进行读写操作

不管是读还是写，都是通过 this.props

4. redux中数据改变了，但是页面不更新

原因：state 是只读的,不能改变它，改变后页面也不会更新

解决方法：生成一个新的state

本节作业：

1. 页面中使用redux数据

2. 页面中修改redux中的数据

第四节 其他

1. reducers合并

2. 异步action

1. 下载中间件

2. 配置:

在createStore是配置

1. 在action中异步请求数据
   组件中调用 asyncSetChat

本节作业：

练习异步操作action