redux实现和使用(simple version)

redux/createStore.js （在redux目录下封装createStore方法）

function createStore(reducer) {
    let state;
    let listeners = [];

    function getState() {
        return state;
    }

    function dispatch(action) {
        state = reducer(state, action);
        listeners.forEach(l => l())
    }

    dispatch({
        type: '@@TYPE/INIT_REDUX'
    })

    function subscribe(listener) {
        listeners.push(listener);
        return () => {
            listeners = listeners.filter(l => l !== listener)
        }
    }

    return {
        getState,
        dispatch,
        subscribe
    }
}

export default createStore

src/index.js （讲封装的createStore方法引入到业务代码中）

import React, { Component } from 'react'
import ReactDom from "react-dom"
import {createStore} from "./redux"

function reducer(state = {
    number: 0
}, action) {
    switch (action.type) {
        case "ADD":
            return {
                number: state.number + 1
            }
        case "MINUS":
            return {
                number: state.number - 1
            }
        default:
            return state;
    }
}

let store = createStore(reducer);

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: store.getState().number
        }
    }

    componentDidMount() {
        store.subscribe(() => {
            this.setState({
                number: store.getState().number
            })
        })
    }

    componentDidUpdate() {
        console.log('check');
    }

    componentWillUnmount () {
        this.unsubscribe();
    }

    add = () => {
        store.dispatch({
            type: 'ADD'
        })
    }

    minus = () => {
        store.dispatch({
            type: 'MINUS'
        }) 
    }

    render () {
        return (
            <div>
                <p>{this.state.number}</p>
                    <button id = "plus" onClick={() => store.dispatch({
                        type: 'ADD'
                    })}> + </button> 
                    <button id = "minus" onClick={() => store.dispatch({
                        type: 'MINUS'
                    })}> - </button>
                </div>
            )
        }
    }
    
    ReactDom.render( <Counter /> , document.getElementById('root'))