Redux 简介（Action、Reducers 和 Store）

Redux 是 JavaScript 应用程序中使用的状态管理库。它只是管理应用程序的状态，或者换句话说，它用于管理应用程序的数据。它与 React 之类的库一起使用。
用途：它使管理状态和数据变得更容易。随着我们应用程序的复杂性增加。一开始很难理解，但它确实有助于构建复杂的应用程序。一开始，感觉工作量很大，但确实很有帮助。
在深入了解 Redux 之前，我们应该了解一些重要的 redux 原则。 Redux 的三个原则是：

• 单一事实来源：它有助于创建通用应用程序。应用程序的状态存储在一个名为store的对象树中。这意味着一个应用程序，一个商店。
• 状态是只读的（不变性）：这意味着我们不直接更改状态对象及其属性。而不是创建一个新对象，而是重新计算新的应用程序状态并用我们新创建的对象更新它。这很重要，因为所有的变化都发生在同一个地方，所以一切都需要按照严格的顺序，一个一个地完成。
• 使用纯函数（reducer）进行更改： Reducer 是纯函数，它们采用先前的状态和操作（稍后讨论）并返回新状态。

redux 的构建部分：

1. 行动
2. 减速器
3. 店铺

Redux 数据流

Actions： Actions 是一个包含信息的纯 JavaScript 对象。操作是商店的唯一信息来源。动作有一个类型字段，它告诉执行什么样的动作，所有其他字段都包含信息或数据。还有一个叫做Action Creators的术语，这些是创建动作的函数。所以动作是信息（对象），动作创建者是返回这些动作的函数。
示例：我们可以尝试的最简单的示例是待办事项。因此，我们将创建两个动作创建者，一个用于在待办事项中添加任务，一个用于删除。

javascript

function addTask(task) {
   
  return {
     
    type: 'ADD_TODO',
    task: task
  }
}
 
function removeTask(task) {
  
  return {
    type: 'REMOVE_TODO',
    task: task
  }
}

所以，以上两个函数都是动作创建者。一个是添加任务，一个是删除任务，两者都有一个类型，它告诉动作创建者的目的是什么，它们将与减速器一起使用。
Reducers：我们已经知道，action 只告诉做什么，但不告诉怎么做，所以 reducer 是一个纯函数，它获取当前的 state 和 action，返回新的 state，告诉 store 怎么做。
让我们为我们的 TO-do 创建一个 reducer。
例子：

javascript

function task(tasks = [], action) {
   
  if (action.type === 'ADD_TODO') {
    return [...tasks, action.task];
  } else if (action.type === 'REMOVE_TODO') {
      return tasks.filter(task => task !== action.task);
    }
  return tasks;
}

因此，在上面的 reducer 中，使用两个参数创建的函数首先是当前状态，接下来是我们要执行的操作，首先初始化当前状态空数组，因为首先任务列表将是空的。
然后检查动作类型，不同类型的动作将具有不同的功能，在上述情况下，如果添加任务，则返回包含旧任务列表并添加一个新任务的数组，但旧状态不会改变旧状态声明我们要退回新的，这需要牢记。删除也一样，如果以上两个都不是，则返回列表。返回新状态，永远不要改变旧状态。
对于更复杂的应用程序，使用 combineReducers() 将它们组合起来，以便它可以传递到存储。
存储：存储是保存应用程序状态的对象。
与商店相关的功能：

• createStore() – 创建商店
• dispatch(action) - 改变状态
• getState() - 用于获取商店的当前状态。

示例：让我们为我们的 TO-do 创建一个商店。

javascript

import { createStore } from 'Redux';
 
// Creating store
const store = createStore(taskList);
 
// Here add is action as you can see console,
// its an object with some info
const add = addTask('Wake up');
console.log(add);
 
// Dispatch usually trigger reducer and perform task
store.dispatch(add);
 
// getState() function is used to get current state
console.log(store.getState());
 
store.dispatch(addTask('Study'));
store.dispatch(addTask('Eat'));
store.dispatch(addTask('Go to sleep'));
store.dispatch(removeTask('Eat'));
store.dispatch(addTask('Work'));
store.dispatch(addTask('Sleep'));
store.dispatch(removeTask('Sleep'));
 
console.log(store.getState());