react - 4.redux

react中，redux是一个用于状态管理的js库，并不是react插件库，用于管理react应用中多个组件共享的状态。
但存在耦合性高的缺点
使用

1.安装

npm install redux --save

2.创建redux文件夹,
|–store.js
|–reducers.js
|–actions.js
|–actionTypes.js

3.reducers.js用于操作state中的数据

import {INCREMENT,DECREMENT} from './action-types'
    export function counter(state=0,action){
        switch(action.type){
            case INCREMENT:
                return state + action.data;
            case DECREMENT:
                  return state - action.data;
             default:
                 return state;     
        }
    }

action-typs.js
    export const INCREMENT = 'INCREMENT';
    export const DECREMENT = 'DECREMENT'

actions.js
    import {INCREMENT,DECREMENT} from './action-types.js'
    export const increment = (number) =>({type:INCREMENT,data:number})
    export const decrement = (number)=>({type:DECREMENT,data:number})

store.js文件
    import {createStore} from 'redux'
    import {counter} from './reducers.js'
    const store = createStore(counter)
    export default store;

index.js
    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './views/app.jsx'
    import store from './redux/store.js'
    function render(){
       ReactDOM.render(<App store={store} />,document.getElementById('root')) 
    }
    //1.初始化渲染
    render()
    //接受到共享数据改变，就选人视图
    store.subscribe(render)

组件使用
    import {increment,decrement} from './redux/actions.js'
    render(){
        return(
            <>
                <button onClick={()=>this.incrementHandle()}> + </button>
                 <strong>{this.props.store.getState()}</strong>
                 <button onClick={()=>this.decrementHandle()}> - </button>
            </>
        )
    }
    incrementHandle(){
        this.props.store.dispatch(increment(10))
    }
    decrementHandle(){
        this.props.store.dispathc(decrement(1))
    }