build your own redux

Presumably, many students have used redux. how to build your own redux? It is said that Redux only has 100 lines of code, but there are 10 thousand lines of comments.

the role of the Redux

Redux is used for state management

Why do we need Redux?

when the project becomes Larger and Larger, it becomes increasingly difficult to transfer data between components.

What is the greatest feature of Redux?

One-way data flow： the state of the entire application is centrally stored in one place, which is convenient for management and tracking. Both React and Vue adopt actually one-way data flow. you can understand one-way data flow as that the parent components pass the data to child components through props, but child components can't modify the props and modify the value of parent components through the method p

The principle of the redux

data store + publish-subscribe model. really, it's just so simple.

Store

you can imagine a warehouse and the boxes inside the warehouse are the initial data.

the publish-subscribe model handles actually the boxes inside the warehouse.

The publish-subscribe model

we can break down the publish-subscribe, the publish-subscribe modal mainly implements a platform, similar to the YouTube website. the authors can publish(dispatch) video, the users can subscribe, and the place to manage the publish-subscribe is a reducer.

Then it must have a 'store' to store the many things. if you want to see all the videos, you can use the 'getState()' method.

What is the core API of the Redux doing?

// create YouTuBe platform, based on reducer(the place to manage publish-subscribe)
const store = Redux.createStore(reducer, initialState);
// get all videos
store.getState();
// user subscribes to the author
store.subscribe(function(){});
//The author publishes some video
store.dispatch({type:'description'});
// Implementing the management center
function reducer(state, action){};

Implement redux

From the above APIs, it can be seen the redux has a createStore method, which returns a store object, the store object has three methods.

// create createStore method, the params is reducer
function createStore(reducer) {
    // offer the API to get all videos
    function getState() {}
    // offer subscribe API
    function subscribe() {}
    // offer publish API
    function dispatch() {}
    return {
        getState,
        subscribe,
        dispatch,
    };
}

Redux mainly implements the store method, however, the reducer method is implemented by the user.

How to implement reducer

we can offer a template of the reducer function. when users implement the reducer function, They should write according to the template

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return state + 1;
        case "decrement":
            return state - 1;
        default:
            return state;
    }
}

let's analyze these two parameters, the state parameter is data that will be changed, the action parameter is an action that will happen.

Prefect the createStore function

// create  createStore function
function createStore(reducer, initialState) {
    // closure store state
    let state = initialState;
    // initial listener array
    const listener = [];

    //Get all videos
    function getState() {
        return state;
    }
    function subscribe() {
         // push function
         listener.push(func);
     }

    function dispatch(action) {
        state = reducer(state, action);
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i];
            // excute
            listener();
        }
    }
    return {
        getState,
        subscribe,
        dispatch,
    };
}

here, our Redux source code has been simply implemented, and friends can try it.