（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、在创建store的时候我们同时要创建Reducers，就是说图书管理员和他的小本子要同时出现。

3、创建小本子（Reducer）

const defaultState={
    inputValue:'123',
    list:[1,2],
};       

export default (state=defaultState,action)=>{
    return state;
}

//reducer返回一个函数就行了
//假如reducer是管理员的小本子，state就是图书馆所有图书的信息（整个store仓库中所有的数据）
//最开始呢，state=defaultState，表示state的默认数据是defaultState，如果defaultState={}，表示整个store里的数据现在是个空的对象

4、创建管理员（store）

import {createStore} from 'redux';
import reducer from './reducer';

const store =createStore(reducer);  

export default store;

把之前的小本子作为管理员的第一个参数放进去，这样一个手里拿着小本子的图书管理员就创建好了。

5、简单的应用

import React,{Component} from 'react';
import 'antd/dist/antd.css';
import { Input ,Button,List } from 'antd';
import store from './store/index';//也可以写成import store from './store'，会自动的去找store下面的index文件
 
export default class Todolist extends Component{
    constructor(props){
        super(props);
        this.state=store.getState(); 
        //使用store的getState方法去通过store->reducer->state找到整个store的数据（图书馆所有图书的信息）
    }
    render(){
        return (
            <div>
                <div style={
  {marginTop:'10px',marginLeft:'10px'}}>

                     //使用拿到的数据，在reducer中看到imputValue为123

                    <Input value={this.state.inputValue} placeholder='这里输入' style={
  {width:'300px',marginRight:'10px'}}/>
                    <Button type="primary">提交</Button>
                </div>
                <List
                    style={
  {width:'300px',marginLeft:'10px',marginTop:'10px'}}
                    bordered

                    dataSource={this.state.list}  //使用拿到的数据，在reducer中看到list为[1,2]

                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
            </div>
        )
    }
}

1.5、action 和reducer的编写

1、首先到chrome浏览器上去下载redux devTools这个扩展工具。在控制台有了redux这个模块，但是需要配置，点击提示的the instructiongs会跳转到https://github.com/zalmoxisus/redux-devtools-extension#usage这个网站，在这个扩展工具的官网写到：

1.1基本商店
对于基本的Redux商店，只需添加：

 const store = createStore（
   reducer，/ * preloadedState，* /
+   window .__ REDUX_DEVTOOLS_EXTENSION__ && window .__ REDUX_DEVTOOLS_EXTENSION __（） 
 ）;
请注意，preloadedState参数在Redux中是可选的createStore。

对于通用（“同构”）应用程序，请在其前面加上