数据流管理：redux

redux和react是两个独立的库，所以redux并不是非用不可，是在Flux框架的基础上改进的一个框架，所以一鸣惊人

redux的三大基本原则

　　唯一的数据源（single source of truth）

　　保持状态只读（state is read-only）

　　数据状态只能通过纯函数来完成（change are made with pure function）

react的基本要素和API

　　store：是保存数据的容器，整个redex只有一个store（三原则之一），这个store上的状态，是一个树形的形状，每个组件都只是树形形状的一部分数据

　　Action：由于react是数据驱动的，Action是view发出的通知，通知state发生变换，通过唯一的方法dispatch发出

　　reducer：store收到action后，需要给出一个新的状态来更新页面，这种state的计算过程就叫做redcer

完整的一个数据流程

　　1、用户通过view，发出一个action，发出的方式是用到了dispatch

　　2.、store自动调用reducer，并且传入当前state和action，返回新的state

　　3、state改变view随之改变

//1、第一步引入
import {reactStore} form 'redux'
//创建reducer
const reducer = {state = 0, action} => {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECRMENT':
            return state - 1;
        defult:
            return state
    }
}
//2、调用reducer
const store = createStore(reducer)
const render = () => ReactDOM.render(
    <Counter
        value = {store.getState()}
　　　　 //4、页面变化，发出action
        inIncrement = {() = > store.dispatch({type:'INCREMENT'})}
        onDecrement = {() = > store.dispatch(type: 'DECRMENT')}
    />
    document.getElementById('root')
)
render()
//3、监听页面变化
store.subscribe(render)

最后根据redux这一数据流程，写了一篇小故事，博君一笑

话说react国家战乱四起，view将军奉命驻守雄州，麾下名为state的军营中有五万将士，叛军来势汹汹，包围了雄州，虽说五万男儿浴血奋战，但仍寡不敌众，雄州危在旦夕，view将军沉思良久，当夜派出心腹dispatch带名为acction的虎符去并州调兵，dispatch连夜突围到达并州，并州守将reducer验明action，下令火速整军救援雄州，跟将军心腹说道，末将职责所在，不能做其他行动，只能派兵，还望见谅，dispatch说道，您是纯函数，我理解您，当即带援军回雄州，这时state中合并十万，最终大破乱军。

哈哈哈哈哈，意淫确实很爽啊！！！

参考资料：

阮一峰redux入门教程

美图前端-redux从设计到源码

立个flag，这个周末看下redux源码，嗯，真香！

数据流管理：redux

猜你喜欢