1、Redux的基础
1.1、Redux的概念简述
1、react本身是一个轻量级的视图层的框架,假如单纯用我们父子组件传值的机制是不能做大型的项目,为什么,看下图
两个不同位置的组件之间传值非常麻烦,而且当大量组件存在数据共享,代码写出来会十分恶心!
2、那么想要使用react去做一个大型的项目就需要一个数据层的框架去配套使用。这样才能hold住大型项目。引入redux,组件之间的传值就变的十分简单,redux要求我们把数据放在一个公共的存储区store之中,组件自身里面就不放数据了,都放在store。那么上图中加入绿色的组件要给其他灰色的组件传值,那么直接去修改store中的值,其它灰色的组件会自动感知到store的数据变化了,他们就会重新去store中取新的数据。
3、Redux=Reducer+Flux(Flux就是官方最原始的数据层的框架,反正不太好用,Redux就是Flux的升级版)
1.2、Redux的工作流程
1、React Component是借书的人。
2、Action Creators表示你给图书管理员说:我要借xxx书,这句话
3、store就是图书管理员
4、Reducers就是图书管理员用来查看书籍信息的记录本
5、实际生活中的借书流程就是:有个借书的人(React Component)说:‘我要借xxx书’(Action Creactors),结果被图书管理员(Store)听到,他就去翻开记录本(Reducers)去查看这个书的位置,然后找到这个书,把这本书给了借书的人(React Component).
6、在代码中这个流程就是:组件(React Component)要去store中获取一些数据,然后给store说我要获取(改变)数据(这句话就是Action Creactors),然后Store不知道你要啥(改变)数据,但Reducers知道你要(改变)什么数据,Store就去查Reducers这个组件需要的(怎么改变)数据,查到后(改变后)就把数据给了组件。
1.3、使用antd编写Todolist页面布局
1、利用antd这个UI框架可以快速实现一个好看的界面和布局https://ant.design/docs/react/introduce-cn。
2、先下载和这个库。使用npm install antd --save 或者yarn add antd
3、然后引入样式文件:import 'antd/dist/antd.css';
4、然后使用什么模块就引入,比如引入一个输入框:import { Input } from 'antd';
5、代码和展示效果如下
import React,{Component} 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.',
];
export default class Todolist extends Component{
render(){
return (
<div>
<div style={{marginTop:'10px',marginLeft:'10px'}}>
<Input placeholder='这里输入' style={{width:'300px',marginRight:'10px'}}/>
<Button type="primary">提交</Button>
</div>
<List
style={{width:'300px',marginLeft:'10px',marginTop:'10px'}}
bordered
dataSource={data}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</div>
)
}
}
在网页的效果如下:
6、使用antd在开发后台管理系统用的很多,在用户界面用的不是太多
1.4创建Redux中的store
1、在redux中,store是最重要的一部分,我们要想去使用redux,就要在项目中去安装redux。
npm install --save redux 或者yarn add redux
2、