【九月打卡】第14天 React零基础入门到实战，完成企业级项目简书网站开发 第五讲
课程章节： Redux入门
主讲老师： Dell
课程内容：
今天学习的内容包括：
redux:数据都放在Store里面，组件改变Store里面的数据，其他组件能感知到Store数据的变化，如果有变化，就获取新的数据，从而达到组件数据传递的功能.store类似于全局变量(但是store更强大的地方在于能主动去刷新所有用到store的组件
redux三个基本原则：
①：store必须是唯一的
②：只有store可以改变自己的内容
③：reducer 必须是纯函数
只有store能改变自己内容说明在reducer里我们不能直接操作state,只能通过定义新变量copy state的值，然后对新变量进行操作并 return 出新变量，不允许直接改变state。
什么是纯函数？
给固定的输入，就一定会有固定的输出，并且不会有任何副作用。
所以对于异步函数（定时器、ajax数据请求等）、动态时间都不适意在reducer里订阅。
课程收获：
5.1 心得：
Redux的设计理念：把所有的数据放到store里进行管理，一个组件改变的store里面的内容，其他的组件就感知到了store里面的变化，再来取数据，从而间接的实现了组件之间实现数据传递的功能。
Facebook：react在2013年开源的时候，还开源了flux（已经过时），flux是官方推出最原始的辅助react的数据层框架，但实际使用时有缺点：公共数据存储区域store由很多的store所组成，这样会导致数据存储的时候会有数据依赖的问题。便在flux的基础上引入了reducer的概念–>redux。
react只是一个轻量级的视图层框架，如果要做大型应用就要搭配视图层框架redux一起使用
redux组件之间的传值非常简单，redux里面要求我们把数据都放在一个公共的存储区域store里面，组件之中尽量少放数据，也就是所有数据都不放在组件自身了，都把它放到一个公用的存储空间里面，然后组件改变数据就不需要传递了，改变store里面的数据之后其它的组件会感知到里面的数据发生改变。这样的话不管组件的层次有多深，但是走的流程都是一样的，会把数据的传递简化很多
render生命周期函数必须存在
shouldComponentUpdate(nextProps,nextState){
}
提高性能
5.2 心得：
ReactComponents 页面上的组件
Store 存储数据的公共区域
redux是视图层框架，把所有数据都放在store之中，每个组件都要从store里拿数据，然后每个组件也要去改store里面的数据，
举例：把这个流程理解成一个图书馆的流程
react compontents:借书的人
action creators:“要借什么书”这句话（语句的表达，数据的传递）
store:图书馆管理员（没办法记住所有书籍的存储情况）
reducers:图书馆管理员的记录本（要借什么书，先查有没有，要还的书查一下放到某个位置）；
借书的人~ 我要借一本书 ~ 图书管理员听见 ~ 查阅reducers手册 ~ 去store找书 ~ 把对应的书给借书人
对应到redux中（redux工作流）：
一个组件 ~ 要获取数据 ~ store接收到 ~ 查数据reducers告诉store给什么数据 ~ store把数据给react。
如果想改变store数据，
一个组件~ 我要改变数据 ~ store接收到 ~ reducers知道store的数据应该如何被修改，reducers告诉store怎么修改数据~store修改好数据 ~ 告诉组件数据修改完了可以获取数据了
5.3 心得：
安装antd
yarn add antd
实例代码：
import React,{ Cmponent } from 'react';
import 'antd/dist/antd.css';
import { Input, Button , List } from 'antd';
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.'
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los angeles battles huge wildfires.',
];
class TodoList extends Component {
render() {
return (
<div style = {{marginTop: '10px', marginLeft: '10px'}}>
<div>
<Input placeholder = 'todo info' style = {{width: '300px'}}>
<Button type = "primary">提交</Button>
</div>
<List
header = {<div>Header</div>}
footer = {<div>Footer</div>}
bordered
dataSource = {data}
renderItem = {item => (<List.Item>{item}</List.Item>)}
/>
</div>
)
}
5.4 心得：
1.npm安装Redux
2.在store文件夹下创建index.js，import { createStore } from 'redux'
3.在store文件夹下创建reducer.js
const defaultState = {
inputValue:'123'
}
export default (state = defaultState,action) =>{
return state;
}
4.index.js中const store = createStore(reducer);
5.在组件中引入，this.state = store.getState()
6.通过redux提供的getState()方法获取Store中的数据：
import store from './store'
constructor() {this.state = store.getState()}
return <input value={this.state.inputValue}>
store相当于图书管理员，管理员记不住该怎样管理和存储数据，所以交给reducer(笔记本)来处理和管理数据
所以在创建store的时候，要把笔记本同时传给管理员，要不然store不知道自己存的是什么
使用 store
constructor（props）{
super(props)
store.getState();
}
5.5 心得：
1.更新store中的数据，首先定义action对象，其中包含type: ‘’, newValue: ‘’,然后通过store.dispatch(action)传给store。
2.store把之前的数据previousState和传过来的action转发给reducers函数。
3.reducers接收state和action后进行数据处理，重新生成一个newState，把newState作为返回值返回给store。
4.store接收newState，将新数据替换原来的数据.
5.观测到数据发生改变(store.subscribe()),重新取值store.getState()，更新页面。
redux过程：
1.用户通过事件先发起action：
const action={
type: ‘input_change’,
value: e.target.value//如果有value的话要写上
}
2.然后把action发送给store：
store.dispatch(action)
5.6 心得：
绑定函数的参数是通过bind（this，index），传递的，然后在函数内通过action传递到store再到reducer中去的，在action中获得index是通过action.index获得的传递过来的index
5.7 心得：
拆分ActionType的原因在于，action中传递Type内容如果是字符串，则不能被react检测。
如果组件中传递的action中的字符串值与reducer中接收比对的字符串值不同，react无法检测出来错误，会导致程序逻辑出现问题。
所以需要将actionTypes拆分出来，单独在文件中定义。需要使用的时，就引入actionTypes文件，以变量的形式使用actionTypes，这样react就可以检测到变量之间而不是字符串之间是否相同，从而进行提示。
5.8 心得：
store文件夹下创建一个actionCreators.js,把action都集中写在一个文件夹中，提高代码的可维护性，方便后期维护和自动化测试
5.9 心得：
核心API：
createStore
store.dispatch —— 派发action，该action传递给store
store.getState —— 获取store中所有数据
store.subscribe(回调函数) —— 订阅store的改变。只要store发生改变，回调函数执行
共同学习，写下你的评论
评论加载中...
作者其他优质文章
