Detailed explanation of JavaScript state container Redux

1. Why Redux

Before talking about why to use Redux, let's talk about the ways components communicate. Common component communication methods are as follows:

• Parent-child components: props, state/callbacks to communicate
• Single Page Application: Routing Values
• Global events such as EventEmitter listener callback value transfer
• Context (context) of cross-level component data transfer in react

In small, less complex applications, the above component communication methods are generally sufficient.

However, as applications become increasingly complex, there are too many data states (such as server response data, browser cache data, UI status values, etc.) and the states may change frequently. Using the above component communication method will be complicated, cumbersome, and difficult to locate and debug related problems.

Therefore, state management frameworks (such as Vuex, MobX, Redux, etc.) are very necessary, and Redux is the most widely used and most complete one among them.

2. Redux Data flow

In an App that uses Redux, the following four steps are followed:

Step 1: trigger an action through store.dispatch(action), where action is an object that describes what is going to happen. as follows:

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Financial front end.' }

Step 2: Redux will call the Reducer function you provided.

Step 3: The root Reducer will merge multiple different Reducer functions into a single state tree.

Step 4: The Redux store will save the complete state tree returned from the root Reducer function.

As the saying goes, a picture is worth a thousand words. Let's use the Redux data flow diagram to familiarize ourselves with this process.

Three Principles

1. Single source of truth: A single data source, the state of the entire application is stored in an object tree and exists only in one store.

2. State is read-only: The state in the state is read-only. You cannot modify the state directly. You can only return a new state by triggering an action.

3. Changes are made with pure functions: Use pure functions to modify the state.

4. Redux source code analysis

The Redux source code currently has js and ts versions. This article first introduces the js version of the Redux source code. The number of Redux source code lines is not large, so for developers who want to improve their source code reading ability, it is worth learning in the early stages.

The Redux source code is mainly divided into 6 core js files and 3 tool js files. The core js files are index.js, createStore.js, compose.js, combineRuducers.js, bindActionCreators.js and applyMiddleware.js files.

Next, let’s study them one by one.

4.1、index.js

index.js is the entry file, providing core APIs such as createStore, combineReducers, applyMiddleware, etc.

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}

4.2、createStore.js

createStore is an API provided by Redux to generate a unique store. The store provides methods such as getState, dispatch, and subscibe. The store in Redux can only dispatch an action and find the corresponding Reducer function through the action to make changes.

export default function createStore(reducer, preloadedState, enhancer) {
...
}

From the source code, we can know that createStore receives three parameters: Reducer, preloadedState, and enhancer.

Reducer is a pure function corresponding to an action that can modify the state in the store.

preloadedState represents the initialization state of the previous state.

enhancer is an enhanced function generated by the middleware through applyMiddleware. The getState method in the store is used to obtain the state tree in the store of the current application.

/**
 * Reads the state tree managed by the store.
 *
 * @returns {any} The current state tree of your application.
 */
function getState() {
  if (isDispatching) {
    throw new Error(
      'You may not call store.getState() while the reducer is executing. ' +
        'The reducer has already received the state as an argument. ' +
        'Pass it down from the top reducer instead of reading it from the store.'
    )
  }
  return currentState
}

The dispatch method is used to dispatch an action, which is the only method that can trigger a state change. subscribe is a listener that is called when an action is dispatched or a state changes.

4.3. combineReducers.js

/**
 * Turns an object whose values ​​are different reducer functions, into a single
 * reducer function. It will call every child reducer, and gather their results
 * into a single state object, whose keys correspond to the keys of the passed
 * reducer functions.
 */
export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
     ...
  return function combination(state = {}, action) {
     ...
    let hasChanged = false
    const nextState = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      //Determine whether the state has changed hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    //Decide whether to return the new state or the old state based on whether a change has occurred
    return hasChanged ? nextState : state
  }
}

From the source code, we can know that the input parameter is Reducers and returns a function. combineReducers combines all Reducers into one large Reducer function. The key point is that every time the Reducer returns a new state, it will compare it with the old state. If there is a change, hasChanged is true, triggering a page update. Otherwise, no processing will be done.

4.4、bindActionCreators.js

/**
 * Turns an object whose values ​​are action creators, into an object with the
 * same keys, but with every function wrapped into a `dispatch` call so they
 * may be invoked directly. This is just a convenience method, as you can call
 * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
 */
function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}
 
export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }
    ...
    ...
  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

bindActionCreator binds a single actionCreator to dispatch, and bindActionCreators binds multiple actionCreators to dispatch.

bindActionCreator simplifies the process of sending actions. When the returned function is called, dispatch is automatically called to send the corresponding action.

bindActionCreators performs different processing according to different types of actionCreators. If actionCreators is a function, it returns a function; if it is an object, it returns an object. The main purpose is to convert actions into dispatch (action) format to facilitate the separation of actions and make the code more concise.

4.5、compose.js

/**
 * Composes single-argument functions from right to left. The rightmost
 * function can take multiple arguments as it provides the signature for
 * the resulting composite function.
 *
 * @param {...Function} funcs The functions to compose.
 * @returns {Function} A function obtained by composing the argument functions
 * from right to left. For example, compose(f, g, h) is identical to doing
 * (...args) => f(g(h(...args))).
 */
 
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
 
  if (funcs.length === 1) {
    return funcs[0]
  }
 
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

Compose is a very important concept in functional programming. Before introducing compose, let’s first understand what Reduce is? The official documentation defines reduce as follows: The reduce() method applies a function to the accumulator and each element in the array (from left to right) to simplify it to a value. Compose is a curried function that is implemented with the help of Reduce. It combines multiple functions into one function to return. It is mainly used in middleware.

4.6、applyMiddleware.js

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 */
export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    ...
    ...
    return {
      ...store,
      dispatch
    }
  }
}

The applyMiddleware.js file provides the important API of middleware. Middleware is mainly used to rewrite store.dispatch to improve and expand the dispatch function.

So why do we need middleware?

First of all, we have to start with Reducer. The three principles of Redux mentioned that reducer must be a pure function. Here is the definition of a pure function:

• For the same parameters, return the same result
• The result depends entirely on the parameters passed in.
• No side effects

As for why the reducer must be a pure function, we can start from the following points?

• Because Redux is a predictable state manager, pure functions make it easier to debug Redux, track and locate problems more easily, and improve development efficiency.
• Redux only compares the addresses of the new and old objects to see if they are the same, that is, through a shallow comparison. If you modify the property value of the old state directly inside the Reducer, both the old and new objects point to the same object. If you still use shallow comparison, Redux will think that no change has occurred. But if it is done through deep comparison, it will be very performance-consuming. The best way is for Redux to return a new object, and the new and old objects are shallowly compared, which is also an important reason why Reducer is a pure function.

Reducer is a pure function, but in the application, it is still necessary to handle operations such as logging/exceptions and asynchronous processing. How to solve these problems?

The answer to this problem is middleware. The dispatch function can be enhanced through middleware. The following is an example (logging and exception recording):

const store = createStore(reducer);
const next = store.dispatch;
 
// Override store.dispatch
store.dispatch = (action) => {
    try {
        console.log('action:', action);
        console.log('current state:', store.getState());
        next(action);
        console.log('next state', store.getState());
    } catch (error) {
        console.error('msg:', error);
    }
}

5. Implement a simple Redux from scratch

Since we are going to implement a Redux (simple counter) from scratch, let’s forget the concepts of store, Reducer, dispatch, etc. mentioned earlier. We just need to remember that Redux is a state manager.

First, let's look at the following code:

let state = {
    count : 1
}
//Before modification console.log (state.count);
//Change the value of count to 2
state.count = 2;
//After modification console.log (state.count);

We define a state object with a count field, which can output the count value before and after modification. But at this point we will find a problem? That is, other places that reference count will not know that count has been modified, so we need to monitor it through the subscription-publish model and notify other places that reference count. Therefore, we further optimize the code as follows:

let state = {
    count: 1
};
//Subscribe function subscribe (listener) {
    listeners.push(listener);
}
function changeState(count) {
    state.count = count;
    for (let i = 0; i < listeners.length; i++) {
        const listener = listeners[i];
        listener(); // listen}
}

At this time, if we modify the count, all listeners will be notified and can take corresponding actions. But are there other problems at present? For example, currently the state only contains a count field. If there are multiple fields, are the processing methods consistent? At the same time, we also need to consider that the public code needs to be further encapsulated. Next, we will further optimize it:

const createStore = function (initState) {
    let state = initState;
    //Subscribe function subscribe (listener) {
        listeners.push(listener);
    }
    function changeState (count) {
        state.count = count;
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i];
            listener(); //Notification}
    }
    function getState () {
        return state;
    }
    return {
        subscribe,
        changeState,
        getState
    }
}

We can see from the code that we finally provide three APIs, which are similar to the core entry file index.js in the previous Redux source code. But Redux has not been implemented yet. We need to support adding multiple fields to the state and implement a Redux counter.

let initState = {
    counter: {
        count : 0
    },
    info:
        name: '',
        description: ''
    }
}
let store = createStore(initState);
//Output count
store.subscribe(()=>{
    let state = store.getState();
    console.log(state.counter.count);
});
// Output info
store.subscribe(()=>{
    let state = store.getState();
    console.log(`${state.info.name}:${state.info.description}`);
});

Through testing, we found that it currently supports storing multiple attribute fields in the state. Next, we will modify the previous changeState to enable it to support self-increment and self-decrement.

//Self-increment store.changeState({
    count: store.getState().count + 1
});
//Self-decrement store.changeState({
    count: store.getState().count - 1
});
//Change to anything store.changeState({
    count: Finance});

We found that we can increase, decrease or modify it at will through changeState, but this is not what we need. We need to constrain the modification of count, because when we implement a counter, we definitely only want to be able to perform addition and subtraction operations. So we will constrain changeState and agree on a plan method to perform different processing based on the type.

function plan (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      }
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      }
    default:
      return state
  }
}
let store = createStore(plan, initState);
//Self-increment store.changeState({
    type: 'INCREMENT'
});
//Self-decrement store.changeState({
    type: 'DECREMENT'
});

We have handled different types differently in the code. Now we find that we can no longer modify the count in the state at will. We have successfully constrained changeState. We use the plan method as the input parameter of createStore and execute it according to the plan method when modifying the state. Congratulations! We have implemented a simple counter using Redux.

Is this Redux? How come this is different from the source code?

Then we change plan to reducer and changeState to dispatch and we will find that this is the basic function implemented by the Redux source code. Now looking back at the Redux data flow diagram is clearer.

6. Redux Devtools

Redux devtools is a debugging tool for Redux. You can install the corresponding plug-in on Chrome. For applications connected to Redux, Redux devtools makes it easy to see the changes that occur after each request, allowing developers to understand the cause and effect of each operation, greatly improving development and debugging efficiency.

As shown in the figure above, this is the visual interface of Redux devtools. The operation interface on the left is the action executed during the current page rendering process, and the operation interface on the right is the data stored in State. Switch from State to action panel to view the Reducer parameters corresponding to the action. Switch to the Diff panel to view the property values ​​that have changed between the two operations.

VII. Conclusion

Redux is an excellent state manager with concise source code and a mature community ecosystem. For example, the commonly used react-redux and dva are both encapsulations of Redux and are currently widely used in large-scale applications. It is recommended to learn the core ideas of Redux through its official website and source code, so as to improve the ability to read source code.

The above is a detailed explanation of the JavaScript state container Redux. For more information about JavaScript state container Redux, please pay attention to other related articles on 123WORDPRESS.COM!