017 redux统一管理state

Redux是js提供的一个可预测性的状态容器，集中度管理react中多个组件的状态。Redux是专门的一个状态管理库，不是react独有的。

什么的可预测性：我们给一个固定的输入，那么必定可以得到一个结果

Redux的适用场景：

1.	组件的状态需要共享的时候
2.	一个组件需要改变另一个组件状态的时候
3.	组建中的状态需要在任何地方都可以拿到的时候

Redux三大原则

1.	单一数据源：整个react中的状态都会被统一的管理到store
2.	State是只读的。不能直接改变state，而是要触发redux中的方法来修改
3.	使用纯函数执行修改操作：action来修改redux中的state

下载安装redux

npm i --save redux

创建reducer.js，写入如下内容，主要用于初始化、提供state读取函数

/*
    本文件主要用于初始化、提供state读取函数
*/
var obj = [
    { name: "黑白大彩电", age: 18 }
]

//默认返回索引为0的age属性
export function data(state = obj[0].age, action) {
    switch (action.type) {
        case "add":
            return state + action.data;
        case "del":
            return (state - action.data);
        default:
            return state;
    }
}

创建store.js，用于创建store，统一管理state

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

export var store = createStore(data);

创建action.js，用于修改state

/*
    本文件主要用于修改state
*/

//增加操作
export const add=(num)=>{
    return {type:"add",data:num}
}

//减少操作
export const del=(num)=>{
    return {type:"del",data:num}
}

在Home.js里使用store，在里面读取age

import React, { Component } from 'react'
import { store } from './../redux/store'
import * as action from './../redux/action';

export default class Home extends Component {
    //在构造函数里初次读取age
    constructor(props) {
        super(props);
        this.state = {
            age: store.getState()
        };
    }

    //监听age是否变化，如果变化则本组件的age同步变化的内容
    componentDidMount() {
        store.subscribe(() => {
            this.setState({
                age:store.getState()
            });
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.age}</h1>
                <button type="button" onClick={() => {
                    store.dispatch(action.add(1));
                }}>
                    点我+1
                </button>

                <button type="button" onClick={() => {
                    store.dispatch(action.del(1));
                }}>
                    点我-1
                </button>
            </div>
        )
    }
}

 

项目架构