（4）前端React入门学习--基础入门部分04（Redux相关部分）

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、