One, foreword

Following the principle of “don’t do it, forget it in 3 seconds”, I’m going to learn more about Redux by writing it by hand. Here’s how to customize a Redux in 25 lines of code.

A brief introduction to Redux

This chapter is from the notes of Redux’s Chinese documentation. It is recommended that you have time to read the documentation directly for more details.

2.1 Usage Example

Let’s start with a simple usage example:

const redux = require("redux");
const { createStore } = redux;
/** * This is a reducer pure function of the form (state, action) => state. * describes how an action converts state to the next state. The form of * * state is up to you. It can be primitive types, arrays, objects, *, or even immutable.js generated data structures. The only important point is that * you need to return the brand new object when state changes, not modify the parameters passed in. * * The following example uses the 'switch' statement and strings to do this, but you can write helper classes * depending on different conventions (such as method mappings) that apply to your project. * /
function counterReducter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      returnstate; }}// Create a Redux store to store the state of the application.
The API is {subscribe, dispatch, getState}.
let store = createStore(counterReducter);

// Updates can be subscribed manually, or events can be bound to the view layer.
store.subscribe(() = > console.log(store.getState()));

// The only way to change internal state is to dispatch an action.
// Actions can be serialized, logged and stored, and later executed in playback mode
const ACTIONS_INCREMENT = { type: "INCREMENT" };
const ACTIONS_DECREMENT = { type: "DECREMENT" };
store.dispatch(ACTIONS_INCREMENT);
/ / 1
store.dispatch(ACTIONS_INCREMENT);
/ / 2
store.dispatch(ACTIONS_DECREMENT);
/ / 1
Copy the code

The above example does the following:

• Let Store = createStore(counterReducter) Create a Redux store to store the application status

• Const ACTIONS_INCREMENT = {type: ‘INCREMENT’} A new action describing the status change

• The counterReducter function is a pure function that describes how an action converts state to the next state

• Store. dispatch(Action) Executes store.dispatch to update state

• Store.subscribe (callback) Subscribes to a store that, when executed by Dispatch, iterates through the callback function that executes the subscription function to notify the subscriber

---

From the above examples, we can see several concepts of Redux:

• Store: stores the application status
• State of the State:
• Action: Indicates the Action for modifying the status
• Reducer: Describes actions corresponding to state update actions
• Dispatch: Use Action to find the Reducer and update the State

Redux by hand

The above example uses the following methods:

• CreateStore, reducer, return store;
  • Store. Dispatch, which takes action to update state;
  • Store. getState, no argument, returns state;
  • Store. Subscribe, which is the callback function to execute when state is updated.

The following implements the createStore method:

3.1 createStore

function createStore(reducer) {
  // Create a store object
  let state; // State object
  let listeners = []; / / listeners

  / / subscriber
  function subscribe(callback) {
    listeners.push(callback); // Add a callback function to the listener for each subscription
  }

  / / update the state
  function dispatch(action) {
    state = reducer(state, action); / / update the state
    listeners.forEach(i= > {
      // Notify all subscribers
      i();
    });
  }

  / / for the state
  function getState() {
    return state;
  }

  // Return the store object
  return {
    subscribe,
    dispatch,
    getState
  };
}
Copy the code

Fourth, summarize the Redux principle

Through the above, the following conclusions can be obtained:

• Publish and subscribe model

Redux notifies each subscriber of state updates by publishing subscriptions.

• Single data source

The global state of the entire application is stored in an object tree that exists in only one store.

• State is read-only

The only way to change state is to trigger an action, which is a generic object that describes events that have occurred.

• Use pure functions to perform modifications

To describe how an action changes the State Tree, you need to write a pure reducers.

---

Source code:

• learn-web-demo-redux

Hope you can help, thanks for reading ~

Don’t forget to point a praise to encourage me oh, pen core ❤️

The resources

• Write a Redux by hand and understand how it works
• Redux’s Three principles