redux

redux（npm install --save redux）

javascript提供的一个可预测性的状态容器，在vue中可以使用，但是在react中会比较多，可以集中管理多个组件的状态。

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

三个原则
1. 单一数据源，整个react中的状态都会被统一管理到store
2. state是只读的，不能直接改变state,而是通过出发redux中的特定方法来进行修改
3. 使用纯函数来执行修改操作：action来改变redux中的state

app.js

import React from 'react'
import Home from "./components/Home"
function App(props){
    return (
        <div className="App">
            <div>
                hello    
                <Home> 
            </div>
        </div>
    )
}
export default App;

src -> redux -> reducer.js

var obj = {
    {name:'xixi',age:18}
}
export function data(state=obj[0].age,action){
    switch(action.type) {
        default:
            return state;
            break
    }

}

src -> redux -> store.js

import {creatStore} from 'redux'
import {data} from './reducer.js'
export var store = createStore(data)

src -> components -> Home.js

import React {Componet} from 'react'
import { store } from "../redux/store"
export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num:store.getState()
        }
    }
    return (
        <div>
            home --- {this.state.num}    
        </div>
    )
}

修改数据
a、当组件修改数据的时候需要调用store.dispatch传递一个action给store
b、store自动调用reducers，并且传入两个参数，当前state和接收到的action
c、reducers接收到这个action后做业务逻辑，并返回一个新的newState给store
d、store这个时候就拥有了state，下一次数据再次发生改变的时候就不会使用defaultState而是store里面的state，需要注意的是reducers里面必须返回一个纯函数，另外reducers里面的state只允许读不允许修改
e、组件通过store.subscribe()监听来实现view的重新渲染

src -> redux -> action.js

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

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

src -> redux -> reducer.js

var obj = {
    {name:'xixi',age:18}
}
export function data(state=obj[0].age,action){
    switch(action.type) {
        // action.js中定义
        case "ADD":
            return state + action.data
            break;
        case "DEL":
            return state - action.data
            break;
        default:
            return state;
            break
    }
}

src -> components -> Home.js

import React {Componet} from 'react'
import { store } from "../redux/store"
import * as action from "../redux/action"
export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num:store.getState()
        }
    }
    componentDidMount(){
        // 生成新的state 用subscribe监听每次修改情况
        store.subscribe(()=>{
            this.setState({
                num: store.getState()
            })
        })
    }
    return (
        <div>
            home --- {this.state.num}    
            <button onClick={()=>{store.dispatch(action.add(1))}}>点我加1</button>
            <button onClick={()=>{store.dispatch(action.del(1))}}>点我减1</button>
        </div>
    )
}