1. The first story

Know the Flux

  1. Before you learn about Flux, take a look at the Store(data) <–> UI(components)
  • Store -> UI: Triggers UI changes when the Store changes
  • UI -> Store: Triggers Store changes when UI changes
  1. In 2014, Facebook introduced the concept of the Flux architecture, which led to many implementations. In 2015, Flux combined with functional programming to become the hottest front-end architecture in a short period of time.
  • Unidirectional data flow

Redux

  • Redux design concept

    Redux stores the entire application state in a place called a Store. It holds a state tree called a Store tree. Components can dispatch actions to the Store and then the Store triggers updates to UI components, rather than notifies them directly. Components refresh their views internally by subscribing to the state state in the Store.

  1. Redux applies to multiple interactions and multiple data sources.
  • Redux specifies that a State corresponds to a View. As long as the State is the same, the View is the same. If you know State, you know what a View looks like, and vice versa.

Redux’s three principles

  • Unique data source

    The state of the entire application is stored in a state tree, and that state tree exists only in a single store

  • The state is read-only (cannot be changed)

    State is read-only, and the only way to change state is to trigger an action

  • Data changes can only be performed by pure functions

    Use pure functions to perform changes. To describe how actions change state, you need to write reducers

Store & Reducer

Redux APi-createstore: redux.js.org/api/creates…

When the Store receives the Action, it must give it a new state for the view to change. The computation process of this state is called Reducer.

Reducer is a pure function that takes the Action and the current state as parameters and returns a new state

  • The official case
import { createStore } from 'redux';

// Reducer function: (state, action) => newState
// Warning: You cannot change the state. You can only return a new state
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/increment':
      return { value: state.value + 1 };
    case 'counter/decrement':
      return { value: state.value - 1 };
    default:
      returnstate; }}Copy the code
  • The optimized case
import { cloneDeep } from 'lodash';

const oldState = {
  value: 0};function counter(oldState, action) {
  const newState = cloneDeep(oldState);
  switch (action.type) {
    case 'increment':
    newState.value += 1;
    break;
  case 'decrement':
    newState.value -= 1;
    break;
  default:}return newState;
}
Copy the code

dispatch

let store = createStore(counter);

store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' });
Copy the code

action

function addCounter() {
  return { type: 'increment' };
}

store.dispatch(addCounter())
Copy the code

3. For example

import { createStore } from 'redux'

// reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

// action
function addItem(text) {
  return {
    type: 'ADD_TODO',
    text,
  };
}

// dispatch
store.dispatch(addItem('Read the docs'));

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]
Copy the code