redux基础使用

基本概念
全局状态管理工具

https://www.redux.org.cn

Redux 和 Vuex 有何区别

Redux 可以用在React、Vue、Angular中 (vue-with-Redux第三方包（npm上有使用方法）)
	Store
	reducer
	action

Vuex 只能用在Vue中
	state
	getters
	mutations
	actions
	module

步骤：
1、安装包，并且创建一个store
npm i redux
2、创建reducer，并且集成到store中
其实reducer就是一个纯函数
3、通过 store 触发 action
action 就是一个对象，其中type属性是必须的
4、我们可以通过redux的插件查看到目前仓库中的值

index.jsx:

import React, { Component } from 'react'

import store from './store/store'                ------------------------------引入store

export default class Index extends Component {
    constructor(){
        super()

        this.state = {
            myCount:store.getState()    ----------------------------------获取store中的数据
        }
    }

    componentWillMount(){                ----------------------------------store中数据更新后再次获取
        // subscribe内部使用的就是订阅者-观察模式，他会观察仓库中数据的变化，只要数据发生变化，它的回调函数就会被执行
        store.subscribe(() =>{
            this.setState({
                myCount:store.getState()
            })
        })
    }

    minus = () => {
        store.dispatch({type:'DECREMENT',num:2})    ------------------------ store 触发 action
    }

    add = () => {
        store.dispatch({type:'INCREMENT',num:2})
    }

    render() {
        return (
            <div>
                仓库此刻的值是：{this.state.myCount}<br/>
                <button onClick={this.minus}>-</button>&nbsp;&nbsp;&nbsp;<button onClick={this.add}>+</button>
            </div>
        )
    }
}

store文件夹下:
store.js:

import {createStore} from 'redux'

// 导入reducers
import reducers from './reducers'

// 创建仓库, 并将reducers传入进去, 第二个参数是便于在redux插件中查看store中的数据
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

// 导出
export default store

reducers.js

// 创建reducers, 纯函数
function counter(state = 0,action){
    console.log("----------------",action)
    switch (action.type) {
        case "INCREMENT":
            
            return state + action.num

        case "DECREMENT":
            
            return state - action.num
    
        default:
            return state
    }
}

export default counter