React学习笔记 3 （Rudux,Redux-logger,Redux-thunk）源码实现

1.myRedux

export function createStore(reducer, enhancer) {
    if (enhancer) {
        return enhancer(createStore)(reducer)
    }
    // 保存状态
    let currentState = undefined;
    // 回调函数
    let currentListeners = [];

    function getState() {
        return currentState
    }
    function subscribe(listener) {
        currentListeners.push(listener)
    }
    function dispatch(action) {
        currentState = reducer(currentState, action)
        currentListeners.forEach(v => v())
        return action
    }
    dispatch({ type: '@@ooo/myReduce-reduce' })
    return {
        getState,
        subscribe,
        dispatch
    }
}

2applyMiddleware

export function applyMiddleware(...middlewares) {
    // 返回强化后函数
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = store.dispatch
        const midApi = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }
        // 使中间件可以获取状态值、派发action
        const middlewareChain = middlewares.map(middleware => middleware(midApi));
        dispatch = componse(...middlewareChain)(store.dispatch)
        return {
            ...store,
            dispatch
        }

    }
}

3.Redux-logger

function logger() {
    return dispatch => action => {
        // 中间件执行
        console.log(action.type, "执行了")
        return dispatch(action)
    }
}

4.Redux-thunk

function thunk({ getState }) {
    return dispatch => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState);
        } else {
            return dispatch(action)
        }
    }
}

5.componse 组合函数

export function componse(...funcs) {
    if (funcs.length === 0) {
        return arg => arg
    }
    if (funcs.length === 1) {
        return funcs[0]
    }
    return funcs.reduce((prv, cur) => (...args) => prv(cur(...args)))
}

6 store/index.js

import { createStore, applyMiddleware } from "./myRedux";
function countReduce(state = 0, action) {
    switch (action.type) {
        case "ADD":
            return state + 1;
        case "MINUS":
            return state - 1;
        default:
            return state;
    }
}
const store = createStore(countReduce, applyMiddleware(thunk, logger));

7.使用

import React, { Component } from "react";
import store from "../store";


export default class ReduxPage extends Component {
    componentDidMount() {
        // 订阅事件
        store.subscribe(() => {
            this.forceUpdate();
        })
    }
    add = () => {
        // 派发动作
        store.dispatch({ type: "ADD" });
    };
    minus = () => {
        store.dispatch({ type: 'MINUS' });
    };
    asyAdd = () => {
        store.dispatch(dispatch => {
            setTimeout(() => {
                dispatch({ type: 'ADD' })
            }, 1000);
        })
    }
    render() {
        console.log("store", store);
        return (
            <>
                <h3>ReduxPage</h3>
                {/* 获取状态 */}
                <p>{store.getState()}</p>
                <button onClick={this.add}>add</button>
                <button onClick={this.minus}>minus</button>
                <button onClick={this.asyAdd}>asyAdd</button>
            </>
        )
    }
}