Redux 工作流程 - JavaScript

Redux 是一个用于管理 JavaScript 应用程序状态的库。它使用单一不可变状态树来管理整个应用的状态。Redux 的状态管理流程如下：

1. 动作（Action）：当应用中发生任何事情（如用户交互、数据更新等）时，就需要发出一个动作。动作是一个简单的 JavaScript 对象，它描述了发生的事件类型以及事件相关的数据。

{
  type: 'ADD_TODO',
  payload: {
    text: 'Buy milk'
  }
}

2. 调度器（Dispatcher）：动作被发送到调度器，调度器只是一个函数，它接收一个动作对象并将其发送给 Redux 应用程序的 store。

const dispatcher = (action) => {
  store.dispatch(action);
};

3. Store：Store 是 Redux 应用程序的核心，它是一个 JavaScript 对象，包含整个应用程序的状态。当动作被发送到 Store 时，Store 负责更新状态，并通知所有注册的监听器。

import { createStore } from 'redux';

const reducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
};

const store = createStore(reducer);

4. 视图（View）：视图从 Store 中获取状态并根据状态更新 UI。当 Store 中状态发生变化时，Store 会通知所有注册的监听器，视图再次从 Store 中获取新的状态并更新 UI。

const render = () => {
  const todos = store.getState();
  const todoListElement = document.getElementById('todo-list');
  todoListElement.innerHTML = '';
  todos.forEach((todo) => {
    const todoElement = document.createElement('li');
    todoElement.textContent = todo.text;
    todoListElement.appendChild(todoElement);
  });
};

store.subscribe(render);
render();

以上就是 Redux 的状态管理流程。它通过简单的动作对象和单一不可变状态树来管理整个应用程序的状态，使状态管理更加可预测和可维护。