Redux core operation process

Redux’s basic principles

Redux principle 1. The State data of an application with a unique data source should only be stored in a single Store, the State tree. 2. Save the state. Read-only You cannot modify the state value directly. 3. Data can only be changed by pure functions (the pure function here is the reducer). The returned result of the function must be determined by the state and action parameters

CreateStore source

export default function createStore(reducer, initialState) {
  
  var currentReducer = reducer;
  var currentState = initialState;
  var listeners = [];
  var isDispatching = false;
  
  /** * Reads the state tree managed by the store. * * @returns {any} The current state tree of your application. */
  function getState() {
    return currentState;
  }

    /** * Adds a change listener. It will be called any time an action is dispatched, * and some part of the state tree may potentially have changed. You may then * call `getState()` to read the current state tree inside the callback. * * @param {Function} listener A callback to be invoked on every dispatch. * @returns {Function} A function to remove this change listener. */
  function subscribe(listener) {
    listeners.push(listener);

    return function unsubscribe() {
      var index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };
  }
  
  // The reducer handles state and action according to the custom reducer and returns the new state. The listener is also invoked
  function dispatch(action) {
    try {
      isDispatching = true;
      // Return the new state
      currentState = currentReducer(currentState, action);
    } finally {
      isDispatching = false;
    }
	// Trigger the listener call
    listeners.slice().forEach(listener= > listener());
    return action;
  }

  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.
  // Store initialization, which executes a dispatch
  dispatch({ type: ActionTypes.INIT });

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  };
}
Copy the code

describe

1. Create a Store that holds a State Tree 2. The only way to change the data in the Store is to call dispatch() method 3. There is only one Store in the application 4. Specify how different parts of the state tree should respond to actions 5. By using combineReducers, combine several reducer functions into a single reducer function

At the heart of Redux is a store generated by the createStore (reducers[,initialState]) method provided by Redux. To generate a store, you must pass reducers, and the second argument is optional

parameter

  • reducer reducerIt’s a pure function. Given the currentstateTrees and things to deal withactionWhich returns the newstateThe tree.
reducer(previousState, action) => newState
Copy the code
  • InitialState Indicates the initialization state.

The key way to

  • GetState () gets the current state in the store.
  • Dispatch (action) dispatches an action and returns it. This is the only way to change the data in the store and trigger a call to the Listener
  • Subscribe (Listener) registers a listener, which is called whenever the store changes
  • ReplaceReducer (nextReducer) Updates the reducer in the current store. Generally, this method is only called in development mode.

application

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

Copy the code

Scope chain

createStore
    |--currentState
    |
    |--reducer()
    |   |--currentState, action
    |
    |--getState()
    |
    |--dispatch()
    |	|--action
Copy the code