Implement the Redux core API

Students who have learned React know redux, the state management library, and they are probably familiar with the API of redux library. When I first started learning Redux, I always thought it was too difficult. Compared with Vuex of Vue, the cost of learning Redux was relatively high. But when you get to know Redux, it turns out that there are several commonly used apis that are not as difficult to implement as you might think.

createStore

The basic operation with Redux is to create a store state store variable, which is created through readux’s createStore method. We tried to implement a createStore of our own.

Create a new my-redux folder, create a new createstore.js file under the file, and implement the core createStore method there.

The createStore method takes two parameters, reducer, which is a pure function, and enhancer, which handles the middleware.

export default function createStore(reducer, enhancer) {    
    if (enhancer) {        
        return enhancer(createStore)(reducer)    
    }    
    let currentState    
    let currentListeners = []    
    function getState() {        
        return currentState    
    }    
    function dispatch(action) {        
        currentState = reducer(currentState, action)        
        currentListeners.forEach(listener => listener())    
    }    
    function subscribe(listener) {        
        currentListeners.push(listener)        
        return () => {            
                const index = currentListeners.indexOf(listener)            
                currentListeners.splice(index ,1)        
            }    
       }    
    dispatch({ type: 'REDUX/DREAM' })    
    return {        
        getState,        
        dispatch,        
        subscribe    
    }
}
Copy the code

CreateStore method eventually return getState, dispatch, the subscribe method, three getState used to retrieve the current state of the store, dispatch to change state, subscribe to deal with when the data change, what needs to be done.

First of all, determine whether there is enhancer method, if there is, further strengthen createStore, and pass reducer to get the final result. Reducer of the createStore method is mandatory, and Reducer is a pure function. Change the value of currentState by the type of action, and currentListners is used to execute the corresponding queue. Subscribe is used to publish and unsubscribe. The createStore method needs to initialize the automatic dispatch.

applyMiddleware

Redux provides an applyMiddleware method in addition to the createStore core API. As the name suggests, this method is used to process middleware, and used in conjunction with createStore, applyMiddleware can receive a range of middleware. Create a new applyMiddleware. Js file to write the core applyMiddleware.

Compose compose compose compose compose compose compose compose compose compose compose compose compose compose compose

function compose(... funs) { if (funs.length === 0) { return arg => arg } if (funs.length === 1) { return funs[0] } return funs.reduce((a, b) => (... args) => a(b(... args))) } export default function applyMiddleware(... middlewares) { return createStore => reducer => { const store = createStore(reducer) let dispatch = store.dispatch const  midApi = { getState: store.getState, dispatch: action => dispatch(action) } const middlewareChain = middlewares.map(middleware => middleware(midApi)) dispatch = compose(... middlewareChain)(store.dispatch) return { ... store, dispatch } } }Copy the code

In Redux, the action type distributed by Store. dispatch can only be an object. In applyMiddleware, the reinforcement of Dispatch is done through the compose method. Finally, the Store and dispatch are exported, and the dispatch overwrites the dispatch of the original store.

General implementation is like this, want to further study the students to github to view the source code.