React-redux总结

一.Redux介绍

Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。

二.Redux工作流程

官网图:

老司机图:

解释:React Components就相当于大官人，然后我们去作“大宝剑”，我们先见到的是Action Creators“妈妈桑”,我们说我要找小红，我是熟客了。"妈妈桑"就回到了Store，然后让Reducer看看"小红“忙不忙（现在的状态），如果不忙就让她过来配大官人。

三.准备制作项目(todoList项目)

1.安装项目,删除无用的文件,并创建初始文件


2.安装ant design

cnpm i antd --save

按需引入组件和样式

import {Input,Button,List} from 'antd'
import 'antd/dist/antd.css'

完善代码:

//快速生成imrc,ccc
import React, { Component } from 'react';
import {Input,Button,List} from 'antd'
import 'antd/dist/antd.css'

const data=[
'早8点开晨会，分配今天的开发工作',
'早9点和项目经理作开发需求讨论会',
'晚5:30对今日代码进行review'
]
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    
    render() { 
        return (
             <div style={{margin:'10px'}}> 
                <div>
                <Input placeholder='Write something' style={{width:'250px',marginRight:'10px'}}></Input>
                <Button type='primary'>增加</Button>
                </div>
                <div style={{margin:'10px',width:'300px'}}>
                <List 
                bordered
                dataSource={data}
                renderItem={item=>{
                  return  <List.Item>
                        {item}
                    </List.Item>   
                }}
                >

                </List>
                </div>
            </div> 
        );
    }
}
 
export default TodoList;

效果:

注意点:
1.dataSource数据写在外面;
2.样式marginRight采用驼峰命名法;

四.redux开始

1.安装redux

cnpm i redux --save

2.因为所有数据都是要跟仓库沟通,所以第一步先创建仓库
新建一个store文件夹,新建index.js文件,在这个文件里

// 引入createStore方法
import {createStore} from 'redux';
//调用createStore方法
const store =createStore();
// 暴露出去
export default store;

3.在同一个文件夹里声明一个管理员reducer

// 设置默认数据
const defaultState={
}
//暴露一个方法,这个方法有两个参数:state,action,在方法里将state返回
export default (state=defaultState,action)=>{
    return state
}

4.回到store/index.js里,将管理员引入进来

5.回到管理员store/reducer.js里,将数据填进去

6.回到自己的todoList.js组件里,将仓库引入,调用仓库里的getState()方法,将里面的值赋值给this.state就有数据了

效果:

7.redux工具的使用:谷歌安装,在store/index.js的createStore()方法的参数二里加上这句话(不加无法查看redux数据)

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

8.通过Input值改变来完整体验一遍redux工作流程

先定义一个输入框的值改变事件,在事件里声明action对象,在action对象里必须有一个type值,另一个是事件对象的value值,然后在这个值改变事件里用store.dispatch(aciton)方法传给store,接着在reducer文件的函数里打印state和action发现,state就是原始值,action就是改变后的新值,我们根据action.type==='action里写的type’来创建一个新值(用对象的深拷贝,因为reducer是不能修改store里的值,所以要创建新值),将新值赋值给state里的旧值,最后返回出来新state.同时发现如果input输入框绑定了value属性的话,输入框输入不会发生变化,解决办法是在组件里采用订阅者模式让组件更新,操作过程是通过store.subscribe(this.方法),在方法里记得调用this.setState(store.getState())即可.

总结:

一句话:

redux是一个状态管理工具,用来管理应用中的数据.

核心:

分为三个部分
Action:是行为的抽象,视图中的每一个交互都是一个action,比如点击按钮.
Reducer:行为响应的抽象,也就是根据action行为执行响应的逻辑操作,从而更新state,比如:点击按钮后添加任务,那么这个添加任务这个逻辑就放到Reducer中.
Store:是储存数据的仓库.
1 Redux应用只能有一个store
2 getState()：获取state
3 dispatch(action)：更新state

(未完待续)

附一个写的redux写的非常好的播客,没有之一,地址:https://segmentfault.com/a/1190000015684895
我的参考源码:https://github.com/huanggengzhong/react-learn/tree/master/08-redux/redux-demo01