学习记录——redux

本质上是一个单独的库，可以抽出来使用 也可以和react配合使用
主要是管理项目中的状态

下载：npm install redux -S

什么时候使用

• 你有着相当大量的、随时间变化的数据
• 你的state需要有一个单一可靠数据来源
• 你觉得把所有state放在最顶层组件中已经无法满足需要了

使用
初始化仓库：src/store/index.js

//初始化仓库
//1.导入一个方法 生成仓库实例
import { createStore } from 'redux'

//2. createStore要传一个纯函数 （目的 可靠的数据计算）
//参数 state 操作数据， action：动作 type
//什么时候 分发  什么时候 此函数就会执行
let counter = (state = 0, action) => {//把数据存储起来
    switch (action.type) {
        //action.type 要大写
        case 'INCREMENT':
            //处理INCREMENT的操作
            console.log('state加了')
            return ++state; //取到一个新的state
        case 'DECREMENT':
            return --state;
        default:
            return state;
    }
}

//3.将纯函数放到createStore的参数中
let store = createStore(counter)
window.store = store;

export default store

views/ReduxPage.js：

import React, { Component } from 'react';
import { Button } from 'antd'
import store from '../../store/index'

//成员变量 不会随着数据改变而改变页面
//state变量 this.setState({})
class ReduxPage extends Component {
    state = {
        count: 0
    }

    componentDidMount() {
        store.subscribe(() => { //获取数据(从仓库获取)
            this.setState({
                count: store.getState()
            })
        })
    }

    render() {
        let {count} = this.state
        return (
            <div>
                <Button onClick={() => {
                    store.dispatch({ type: 'DECREMENT' }) //分发数据(分发到仓库)
                }}>-</Button>

                {count}

                <Button onClick={() => {
                    store.dispatch({ type: 'INCREMENT' }) //分发数据(分发到仓库)
                }}>+</Button>
            </div>
        );
    }
}

export default ReduxPage;