redux和combineReducers的封装

一、redux的封装

思路：

首先要明白redux有两个函数 一个是createStore和combineReducers。然后围绕这进行展开。

1、在store文件夹新建一个index.js，将createStore和reducers文件引入进来。

 2，然后我们进行对createStore封装

2-1、createStoref的封装

        我们知道createStoref有三个函数方法，分别为getState()，dispatch()，subscribe()，实际就是对这三个方法进行封装，然后再return出这三个方法，代码如下：

const createStore = (reducer)=>{
    // 设置默认状态
    let state 
    //设置默认action中的type
    let actionType = '@@redux/INIT'
    let defaultAction = {
        type:actionType
    }
    // 事件订阅，存放订阅者的数组
    let listener = []
    const dispatch = (action=defaultAction)=>{
        // store将接收到dispatch传递过来的action数据，并交reducer处理
        state = reducer(state,action)
        // 接收到数据改变去通知所有订阅者调用函数
        listener.map((cb)=>{
            cb()
        })
    }
    // dispatch初始化
    dispatch()
    const getState = ()=>{
        return state
    }

    const subscribe =(cb)=>{
        // 将所有订阅者收集起来
        listener.push(cb)
    }

    return{
        dispatch,
        getState,
        subscribe
    }
}


const combineReducers = ()=>{}
export {
    createStore,
    combineReducers
}

2-2 reducer文件

 3、在组件页面渲染并实现修改

 二、combineReducers的封装

 通过上图我们可以看出，react官方封装redux的combineReducers函数接是收一个对象,所以按照这个思路下面函数传的参数reducers是个对象

 从上图代码我们可以看出reducer不仅是个对象，而且还是属于对象中的函数，所以我们return的应该是个function函数

store文件

 注意：redux与combineReducers联合使用时，设置默认state应为一个空对象

 

 redux封装与combineReducers封装完整代码如下：

组件页面代码

import reduxStore from './reduxStore'
import { Component } from "react";
export default class FzRedux extends Component {
    state  = reduxStore.getState()
    render() {
        reduxStore.subscribe(this.update.bind(this))
        // let {n} = this.state
        let {n} = this.state.aa
        return (
            <div>
                {n}
                <p><button onClick={this.handle.bind(this)}>点击</button></p>
            </div>
        )
    }
    update(){
        this.setState(reduxStore.getState())
    }
    handle(){
        let action = {
            type:'ADD'
        }    
        reduxStore.dispatch(action)    
    }

}

 store文件代码

import {createStore,combineReducers} from '../redux'
// import reduxReducer from '../reduxReducer'
import aa from '../reduxReducer'
const reduxReducer = combineReducers({
    aa,
})
const store = createStore(reduxReducer)
export default store

reducer代码

const defaultState ={
    n:10
}

export default (state=defaultState,action)=>{
    switch(action.type){
        case 'ADD':
            const newState = state
            newState.n++
            return newState
    }
    return state
}

封装的redux与combineReducers核心代码如下，只需要在使用的页面引用它们就行。

const createStore = (reducer) => {
    // 设置默认状态
    let state ={}
    //设置默认action中的type
    let actionType = '@@redux/INIT'
    let defaultAction = {
        type: actionType
    }
    // 事件订阅，存放订阅者的数组
    let listener = []
    const dispatch = (action = defaultAction) => {
        // store将接收到dispatch传递过来的action数据，并交reducer处理
        state = reducer(state, action)
        // 接收到数据改变去通知所有订阅者调用函数
        listener.map((cb) => {
            cb()
        })
    }
    // dispatch初始化
    dispatch()
    const getState = () => {
        return state
    }

    const subscribe = (cb) => {
        // 将所有订阅者收集起来
        listener.push(cb)
    }

    return {
        dispatch,
        getState,
        subscribe
    }
}

const combineReducers = (reducers) => {
    // 以上参数reducers是个对象
    // 接到的数据默认数据格式是{inNumReducer:{},infoReducer:{}} 所以我们设置一个newState对象,用于包裹它们
    let newState = {}
    return function (state, action) {
        //遍历reducers中每个reducer ,并添加到newState
        for (let key in reducers) {
            // 获取每个reducer
            let reducer = reducers[key]
            // 给newState对象添加key和value state是默认值
            newState[key] = reducer(state[key], action)
            console.log(state[key],key,state,newState[key])
        }
        return newState
    }

}
export {
    createStore,
    combineReducers
}