The Redux state manager is essentially a singleton pattern. Let’s implement a simple Redux model that we need to familiarize ourselves with before implementing.

  • Redux stores the entire application state in one place, called a Store and keeps a state tree in it.
  • Components can dispatch actions to stores instead of notifying other components directly
  • Other components can refresh their views by subscribing to states in the Store.

So let’s think about what we can do with this idea. Let’s abstract it, extract the core idea, and draw a fancy picture:

To describe it in words, there is a private property state in a unique warehouse. The warehouse is managed by the big brother of the gatekeeper, and all operations on the state must go through the big brother of the gatekeeper. People outside the warehouse have no right to operate the state directly, and if they subscribe, they will receive the state change event after the state changes. Ok, so let’s start code with this idea

Step 1: Declare an object

const state={
	a: 1
}

Step 2: Wrap the object and make it inaccessible

function createStore(){
	const state={
		a: 1
	}
}

Step 3: Expose a method that allows the state to be manipulated externally

function createStore() { let state={ a:1 }; Function getState() {return state; Return {getState}} let store = createStore() // Create a repository let state = store.getState() // get the state state Console. log(store.getState()) // outputs {a: 1} state.a = 2 // Sets the value of state A to 2 console.log(state) // outputs {a: Console. log(store.getState()) {a: 2} console.log(store.getState())

So we’re going to do the sixth rowreturn stateReplace withreturn JSON.parse(JSON.stringify(state))This problem can be avoided.

Step 4: In addition to getting the state, we also need to manipulate the state, expose the second method, Dispatch, and optimize the initialization of the state

'use strict' function createStore() { let state; Parse (json.stringify (state))} function dispatch(action) {// Dispatch state = Reducer (state,action) // Accept the current state and action as parameters and return a new state} dispatch({type: Return {getState, dispatch}} let initState = {count: Function reducer(state = initState, action) { The default value is initState // Determine the type of action switch (action.type) {case 'ADD_TODO': return {... state, count: action.number }; / /... Count: action.number overrides the previous value default: return state; }} let store = createStore(); let state = store.getState(); 'ADD_TODO', number: 1 }; store.dispatch(action); Console. log(store.getState()) {count: 1}

The reducer processor function defined by us was executed in Diapatch to add, delete, modify and check. The example demonstrates creating a repository first and initializing state while creating a new repository. Diapatch then diapatch an action:ADD_TODO that changes the value of count and returns a new state object. Finally, we can see the output. The original state becomes {count: 0} after initialization and {count: 0} after ADD_TODO. 1}.

The Reducer function is the reducer function that we need to define ourselves when using Redux.

At this point, we have implemented the creation of a repository and can customize handlers to operate on state. What else is missing? In real projects, most of our components need to get the new state immediately after a state change, and then do different things based on the state change. That is, the component listens for state and notifies the corresponding component immediately when state changes. Let’s get on with it…

Step 5: Add a subscription function subscribe

function createStore() { let state; let listeners = []; Parse (json.stringify (state))} function dispatch(action) {// Dispatch state = reducer(state,action); ForEach (listener => listener()) return a new State listeners. Function subscribe(listeners){function subscribe(listeners){function subscribe(listeners){function subscribe(listeners){function subscribe(listeners){function subscribe(listeners); Function () {function = listeners. Filter (item => item! = listener); }} dispatch({type: '@@init'}); Return {getState, dispatch, subscribe}} return {getState, dispatch, subscribe}} */ let initState = {count: Function reducer(state = initState, action) { The default value is initState // Determine the type of action switch (action.type) {case 'ADD_TODO': return {... state, count: action.number }; / /... Count: action.number overrides the previous value default: return state; }} let store = createStore() let action = {// define an action type: 'ADD_TODO', number: 1}; Let unADD = store. Subscribe (function(){console.log(' state changed, now state: ');  console.log(store.getState()) // { count: 1 } }) store.dispatch(action); // Issue an action to change the stateCopy the code

Thunk thunk ~, our basic model of Redux is ready, what do you not understand can ask you ~