Redux

基本概念

redux是和react不同的框架。react负责渲染页面；redux是组件公共数据状态的管理，相当于一个仓库。

redux适用场景

组件间传递状态数据较为复杂，应用程序规模较大的情况，如：

1. 某个组件的状态需要共享

2. 某个组件需要在任何地方都可以拿到

3. 一个组件需要改变全局状态

4. 一个组件需要改变其他组件的状态

redux的三大原则

1. 单一数据源

2. state状态只读

3. reducer必须是纯函数

redux的工作流程

一个组件想要获取更新store中的数据，给store说要做这个动作，这时就会派发这个动作dispatch action给store，store就会去reducer中查，reducer就会返回一个新的结果给store，store就会将这个新的结果返回给组件。

 使用redux获取store中的数据（主要是工作流程中的右半部分）

安装redux，使用redux中的createStore方法创建一个store仓库。

创建一个reducer函数，在函数内部进行逻辑处理。将reducer函数传给createStore，这样store就能拿到reducer返回的最新数据。

组件中是通过getState方法获取store中的数据。

yarn add redux

import { createStore } from "redux";
const store = createStore(reducer); // 创建store仓库，传入reducer
function reducer (state = { tempValue: "tempValue" }, action) {
    return state;
}

class Demo extends Component {
    constructer () {
        super();
        this.state = store.getState(); // 组件内获取store中数据
    }
    render() {
        return (
            <div>
                <input value={this.state.tempValue} /> // 渲染
        )
    }
}

修改store中的数据

定义一个行为action，store对象会通过dispatch分发这个action给reducer，让reducer触发，根据action.type判断得到最新的state返回给store，store将state渲染到组件中。