Redux 是一个流行的 JavaScript 状态管理库，主要用于管理复杂应用的状态。它由 Dan Abramov 和 Andrew Clark 创建，并受到了 Flux 架构的启发。Redux 的核心理念是维护一个单一的全局状态对象，所有的状态变更都通过一种叫做“action”的方式来描述，然后这些 action 会通过“reducer”函数来更新状态。

Redux

Redux 中的 selectors 是用来从 Redux 的状态树（state tree）中抽取并派生数据的函数。在 Redux 应用中，全局状态是以一个单一的对象存储的，由于这个状态树可以非常庞大并包含许多不同的数据片段，直接从中获取数据可能会既复杂又繁琐。Selectors 就是为了简化访问状态树中的数据而存在的。

Selectors 的主要职责和作用有：

1. **封装状态结构**：Selectors 提供了一个抽象层，允许组件不必了解状态树的具体结构即可读取状态。这意味着如果状态树的结构发生了变化，只需更新相应的 selectors，而无需修改所有使用了这部分状态的组件。

2. **计算派生数据**：Selectors 可以用来计算派生数据，即根据状态树中的原始数据来计算新的数据表示。比如，从一个包含多个对象的数组中过滤出符合特定条件的对象，或者计算某些数据的总和。

3. **性能优化**：配合库如 Reselect，selectors 可以通过记忆（memoization）技术避免不必要的计算。这意味着只有当 selector 的输入（即状态树的相关部分）发生变化时，selector 才重新计算，否则它会返回上一次计算的结果，从而提高应用的性能。

4. **重用和组合**：Selectors 可以被重用于不同的组件中，也可以组合在一起构建更复杂的 selectors，这有助于减少代码冗余并保持逻辑的一致性。

### 例子

假设我们有一个 Redux 状态，其中包含一个商品列表，每个商品都有价格和类别。如果我们想要获取所有电子类别商品的总价格，我们可以写一个 selector 来实现这一点：

```javascript
// state结构示例
const state = {
  products: [
    { id: 1, name: '手机', category: '电子', price: 599 },
    { id: 2, name: '平板电脑', category: '电子', price: 799 },
    { id: 3, name: '手表', category: '配饰', price: 199 }
    // 更多商品...
  ]
};

// Selector
const selectElectronicProductsTotalPrice = (state) => {
  return state.products
    .filter(product => product.category === '电子')
    .reduce((total, product) => total + product.price, 0);
};

// 使用Selector
const totalPrice = selectElectronicProductsTotalPrice(state);
console.log(totalPrice); // 输出应为 1398
```

在这个例子中，`selectElectronicProductsTotalPrice` 是一个 selector，它首先过滤出所有电子类别的商品，然后计算并返回这些商品价格的总和。通过这种方式，我们不仅封装了对状态树的查询逻辑，还使得这段逻辑更易于测试和重用。

`getUser`不是一个减速器，它确实是一个选择器，即一个知道如何从存储中提取特定数据块的函数。

_选择器_提供了一个额外的层，这样，如果您更改了商店结构，并且突然您`users`不再位于`state.entities.users`，而是位于`state.users.objects.entities`（或其他什么），那么您只需要更新`getUser`选择器，而不是应用程序中您正在制作的每个位置。参考旧位置。

这使得它们在重构 Redux 存储时特别方便。

选择器是 redux 状态的 getter。与 getters 一样，选择器封装了状态的结构，并且是可重用的。选择器还可以计算派生属性。

您可以编写选择器，例如您在 redux-saga 中看到的选择器。例如：

    const getUsersNumber = ({ users }) => users.length;
    
    const getUsersIds = ({ users }) => users.map(({ id }) => id);
    

ETC...

您还可以使用[reselect](https://github.com/reactjs/reselect)，这是 Redux 的一个简单的“选择器”库，它可以记忆选择器以提高它们的效率。

选择器是将 Redux 状态作为参数并返回一些数据以传递给组件的函数。

    const getUserData = state => state.user.data;
    

为什么要使用它？

1.  主要原因之一是避免 Redux 中出现重复数据。
2.  随着应用程序的增长，数据对象的形状不断变化，因此不要在所有相关组件中进行更改。强烈建议/更容易在一个地方更改数据。
3.  选择器应该靠近减速器，因为它们在相同的状态下运行。数据更容易保持同步。

使用[重新选择](https://www.npmjs.com/package/reselect)有助于记住数据，这意味着当将相同的输入传递给函数时，返回之前的结果而不是再次重新计算。因此，这可以增强应用程序的性能。

What are selectors in redux

`fork` 在 `redux-saga` 是一种非阻塞调用效果，用于创建一个新的 `saga` 分支，该分支可以同时与父 `saga` 运行。使用 `fork` 的场合通常包括以下几点：

1. **并发执行任务**：当你希望启动一个新的任务而不阻塞当前的流程时，可以使用 `fork`。这允许同时执行多个任务。

   **例子**：假设在一个用户登录的流程中，我需要并行地从多个源获取数据，比如用户信息、用户设置以及用户消息。我可以通过 `fork` 来分别启动三个不同的 `saga`，它们将并行执行，而不会互相等待。

    ```javascript
    function* loginFlow() {
      // ... 登录逻辑
      yield fork(fetchUserInfo);
      yield fork(fetchUserSettings);
      yield fork(fetchUserMessages);
      // ... 其他逻辑
    }
    ```

2. **非关键任务**：如果有一些任务是次要的，或者说它的完成与否不会影响当前主流程的继续，可以使用 `fork` 来执行。

   **例子**：在提交表单数据后，我可能想要记录一些统计数据，但是不希望统计代码的失败影响主流程。

    ```javascript
    function* submitFormSaga(data) {
      try {
        yield call(api.submitForm, data); // 主要任务
        yield put({ type: 'FORM_SUBMIT_SUCCESS' });
        yield fork(recordFormSubmitStats, data); // 非关键任务
      } catch (e) {
        yield put({ type: 'FORM_SUBMIT_FAILURE', message: e.message });
      }
    }
    ```

3. **长期运行的监听器**：`fork` 可用于启动一个任务，该任务将长期运行并监听将来可能发生的动作。它作为一个后台任务，在后台持续监听某些动作而不阻塞其他 `saga`。

   **例子**：一个聊天应用可能需要一个 `saga` 来监听接收新消息的动作。

    ```javascript
    function* watchNewMessages() {
      while (true) {
        const action = yield take('RECEIVE_MESSAGE');
        // 处理接收到的消息
      }
    }

    function* mainSaga() {
      // ...
      yield fork(watchNewMessages);
      // ...
    }
    ```

在使用 `fork` 时，需要注意的是，`fork` 创建的任务是不会阻塞父 `saga` 的继续执行。如果你需要确保任务完成后再继续，应该使用 `call` 效果。此外，`fork` 创建的任务在出错时不会传播错误到父 `saga`，这意味着如果不处理，可能会导致在后台默默地失败。因此，启动 `fork` 任务时通常需要在任务中进行适当的错误处理。

一般来说，`fork`当传奇需要启动非阻塞任务时，这是有用的。这里的非阻塞是指：调用者启动任务并继续执行，而不等待它完成。

在多种情况下，此功能都非常有用，但主要有两种：

*   按逻辑域对 sagas 进行分组
*   保留对任务的引用以便能够取消/加入它

您的顶级传奇可以是第一个用例的示例。你可能会遇到类似的情况：

    yield fork(authSaga);
    yield fork(myDomainSpecificSaga);
    // you could use here something like yield [];
    // but it wouldn't make any difference here
    

其中`authSaga`可能包括以下内容：

    yield takeEvery(USER_REQUESTED_LOGIN, authenticateUser);
    yield takeEvery(USER_REQUESTED_LOGOUT, logoutUser);
    

您可以看到这个示例与您所建议的等效，即使用`fork`saga 进行调用并产生`takeEvery`调用。但实际上，您只需出于代码组织目的而执行此操作。`takeEvery`本身就是一个分叉任务，因此在大多数情况下，这将是无用的冗余。

第二个用例的示例如下：

    yield take(USER_WAS_AUTHENTICATED);
    const task = yield fork(monitorUserProfileUpdates);
    yield take(USER_SIGNED_OUT);
    yield cancel(task);
    

您可以在这个示例中看到，将`monitorUserProfileUpdates`在调用者传奇恢复时执行，并等待`USER_SIGNED_OUT`要分派的操作。它还可以保留对其的引用，以便在需要时取消它。

为了完整起见，还有另一种方式来启动非阻塞调用：`spawn`。`fork`不同之`spawn`处在于错误和取消从子传奇到父传奇的方式。

通常`fork`对于某些具有多次 API 调用分派的情况变得更有用，原因是您可以通过实例化任务中的取消来拒绝这些获取，例如`cancel(task1);`

如果最终用户强制退出应用程序，或者其中一项任务失败，导致您的指令、策略和逻辑出现问题，并且取消或终止 saga 上的当前处理任务可能是合理的，则非常有用；

有**2种方法**可以取消任务

[来自redux-saga](https://redux-saga.js.org/docs/advanced/NonBlockingCalls/#first-try) **非阻塞**效应取消文档的基础

    import { take, put, call, fork, cancel } from 'redux-saga/effects'
    
    // ...
    
    function* loginFlow() {
      while (true) {
        const {user, password} = yield take('LOGIN_REQUEST')
        // Non-Blocking Effect which is the fork
        const task = yield fork(authorize, user, password)
        const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
        if (action.type === 'LOGOUT'){
          //cancel the task
          yield cancel(task)
          yield call(Api.clearItem, 'token')
        }
      }
    }
    

或者

    
    import {call, put, fork, delay} from 'redux-saga/effects';
    import someAction from 'action/someAction';
    
    function* fetchAll() {
      yield fork(fetcher, 'users');
      yield fork(fetcher, 'posts');
      yield fork(fetcher, 'comments');
      yield delay(1500);
    }
    
    function* fetcher(endpoint) {
      const res = yield call(fetchAPI, endpoint);
      if (!res.status) {
        throw new Error(`Error: ${res.error}`);
      }
      yield put(someAction({payload: res.payload}));
    }
    
    function* worker() {
      try {
        yield call(fetchAll);
      } catch (err) {
        // handle fetchAll errors
      }
    }
    
    function* watcher() {
      yield takeEvery(BLOGS.PUSH, worker);
    }
    

别客气 ：）

When to use fork in redux saga

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

1. **设计目的**:
   - **React Query** 是专门为处理异步数据（服务器状态）而设计的，比如从API检索数据、缓存数据以及数据同步。
   - **Redux** 是一个更通用的状态管理库，它为JavaScript应用提供了一个可预测的状态容器，可以用来管理应用的客户端状态（UI状态）。

2. **数据缓存和失效**:
   - **React Query** 内建了数据缓存和自动失效的机制。它能够自动地在后台重新获取数据，以及在数据变得过时时标记它们。
   - **Redux** 本身并不直接提供这些功能。要在Redux中实现数据缓存和失效，通常需要额外的中间件或手动实现相应的逻辑。

3. **数据同步和更新**:
   - **React Query** 提供了一套内置的工具来处理数据的查询、突变（mutations）、更新和同步，这样在使用时只需要少量的样板代码。
   - **Redux** 需要手动管理数据同步和更新，通常涉及到编写action、reducer以及使用中间件来处理异步逻辑，这可能会导致较多的样板代码。

4. **配置和样板代码**:
   - **React Query** 的使用通常更简洁，它提供了hooks，如`useQuery`和`useMutation`，这些API可以让你直接在组件中发起数据请求。
   - **Redux** 的配置和使用相对复杂，特别是在项目初始搭建时。你需要定义actions、reducers、创建store等，虽然Redux Toolkit可以帮助减少一些样板代码。

5. **开发哲学**:
   - **React Query** 倾向于提供一种简化的方式来处理服务器状态，它鼓励你直接从组件内部加载数据，而不需要将所有的数据都放到全局状态管理中。
   - **Redux** 遵循Functional Programming的原则，通过使用纯函数（reducers）和不可变数据来管理和更新状态，这样可以更容易地跟踪状态的变化和进行时间旅行调试。

6. **社区和生态**:
   - **React Query** 在异步数据管理方面很受欢迎，但是它的生态相较于Redux来说较小，因为它比较专注于数据获取和缓存。
   - **Redux** 有一个庞大的社区和生态系统，包括许多中间件和附加库，如redux-thunk, redux-saga, reselect, redux-form等。

### 例子:
假设你的应用需要从一个REST API获取用户列表，并且你希望显示的数据是最新的。使用**React Query**，你可以这样做：

```jsx
import { useQuery } from 'react-query';

function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  // Render your UI based on the data, error, and loading state...
}
```

在这个例子中，`fetchUsers`是一个异步函数，它向API请求数据。`useQuery`会自动处理数据的加载、缓存、重载和更新。

而在**Redux**中，你可能需要创建actions和reducers来处理异步请求，并使用例如`redux-thunk`的中间件来处理异步逻辑：

```jsx
import { useDispatch, useSelector } from 'react-redux';

function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  // Render your UI based on the users, error, and loading state...
React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。

**React Query** 是一个用于数据获取、缓存、同步和更新的库。它专注于处理异步数据操作，如从API检索数据、缓存结果以及自动重新获取数据。以下是React Query的一些关键特点：

- **自动缓存和无效化**：React Query自动缓存每次请求的结果，并在数据变化时提供重新获取数据的机制。
- **后台同步**：支持在数据变化或用户与应用程序互动时，自动在后台更新数据。
- **查询状态**: React Query 提供了丰富的状态信息，包括加载状态、错误状态、数据状态等，方便在UI中展示。
- **最小的全局状态管理**：React Query的目标是用最小的配置管理服务器状态。

**Redux** 是一个为JavaScript应用程序提供可预测状态容器的库，特别适合在React中使用。它主要用于管理和维护应用程序的全局状态，并提供一种模式来更新和访问这个状态。以下是Redux的一些关键特点：

- **全局状态管理**：Redux提供单一的全局状态树，所有状态的变化都通过派发行为(action)和归约器(reducers)的方式来管理。
- **可预测性**：因为所有的状态变化都遵循一个明确的流程，所以应用程序的行为是可预测的。
- **中间件**：Redux 支持使用中间件来扩展其功能，比如异步调用、日志记录等。
- **开发工具**：Redux拥有强大的开发工具，如Redux DevTools，可以帮助开发者追踪状态的变化和行为的派发。

**主要区别**：

1. **用途**：React Query主要用于数据同步，而Redux用于全局状态管理。
2. **数据管理**：React Query内置了数据获取和缓存的机制，而Redux需要开发者手动管理数据请求和响应结果。
3. **状态同步**：React Query提供自动的数据同步机制，Redux则需要结合额外的库（如redux-thunk或redux-saga）来处理异步逻辑。
4. **配置**：React Query减少了配置和样板代码的需要，Redux则需要更多的样板代码和配置步骤。
5. **开发体验**：React Query 的API设计更贴近React的hooks模式，而Redux通常需要遵循特定的设计模式和最佳实践。

例如，如果我们有一个用户列表，并且我们想通过React Query来获取这些用户，我们可能会这样做：

```javascript
import { useQuery } from 'react-query';

function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}
```

使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

// Action creators
const fetchUsersRequest = () => ({ type: FETCH_USERS_REQUEST });
const fetchUsersSuccess = users => ({ type: FETCH_USERS_SUCCESS, payload:

React-query 就是所谓的专用库。它为你保存了一个 api 缓存——没有别的。由于它是专门的，因此它可以很好地完成这项工作并且需要更少的代码。

另一方面，Redux 为您提供了几乎可以存储任何内容的工具 - 但您必须编写逻辑。因此，您可以在 Redux 中做更多事情，但您可能必须编写专用库不需要的代码。

您可以并行使用它们：react 查询中的 api 缓存，Redux 中的其余全局状态。

也就是说，官方 Redux Toolkit 从 1.6 版开始还附带了 api 缓存抽象[RTK Query](https://redux-toolkit.js.org/rtk-query/overview)，其功能集与 React Query 类似，但总体概念有所不同 - 您可能还想检查一下。

`react-query`旨在**处理存储在远程服务器上的数据**。要访问此数据，您的应用程序需要使用异步请求。您可能需要在这里处理缓存、加载状态、网络故障等问题。

这就是react-query 的闪光点。

`Redux`另一端**处理客户端的数据**。例如，文本输入的内容或模态的状态。您不需要处理与网络相关的问题。但您确实需要处理复杂的因果序列。

这就是 redux 的闪光点

`Redux`这`react-query`是两个非常不同的东西：`react-query`用于数据同步，`Redux`是全局状态管理器。`react-query`用于将所有应用程序保持同步到同一个数据库，`Redux`用于将应用程序状态的一部分共享给需要读取该状态的所有组件。

举个例子：我有一个可以与其他用户聊天的应用程序。我使`react-query`所有应用程序与用户收到的所有消息保持同步，然后将消息存储在其中，`Redux`以便在聊天页面和历史聊天页面上显示消息。

React Query 管理服务器状态。它的主要功能是处理Server和Client之间的功能。

Redux 处理客户端状态。Redux 可用于异步存储数据。

因此，它们在不同层面上都有其独特的作用，并且可以同时使用。

我们应该区分两种状态，**客户端状态**和**服务器（或远程）状态**：

*   客户端状态包含：
    *   本地创建的尚未持久化到服务器的数据。
    *   处理活动路由、选定选项卡、微调器、分页控件等的 UI 状态。
*   服务器状态是与以下内容相关的所有内容：
    *   数据远程保存，需要异步 API 来获取和更新

当涉及到客户端状态时，**Redux**是一个用于管理应用程序状态的出色管理工具。

另一方面，为了管理服务器状态，我们可以使用常规状态管理工具，但它们不太擅长处理异步或服务器状态。因此，为了解决这个问题，我们使用**React Query**。正如他们的文档中所述，**React 查询**是一个很棒的工具：

*   缓存...（可能是编程中最难做的事情）
*   将同一数据的多个请求合并为单个请求
*   在后台更新“过时”数据
*   了解数据何时“过时”
*   尽快反映数据更新
*   性能优化，例如分页和延迟加载数据
*   管理服务器状态的内存和垃圾收集
*   通过结构共享来记忆查询结果

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

1. **设计目的**:
   - **React Query** 是专门为处理异步数据（服务器状态）而设计的，比如从API检索数据、缓存数据以及数据同步。
   - **Redux** 是一个更通用的状态管理库，它为JavaScript应用提供了一个可预测的状态容器，可以用来管理应用的客户端状态（UI状态）。

2. **数据缓存和失效**:
   - **React Query** 内建了数据缓存和自动失效的机制。它能够自动地在后台重新获取数据，以及在数据变得过时时标记它们。
   - **Redux** 本身并不直接提供这些功能。要在Redux中实现数据缓存和失效，通常需要额外的中间件或手动实现相应的逻辑。

3. **数据同步和更新**:
   - **React Query** 提供了一套内置的工具来处理数据的查询、突变（mutations）、更新和同步，这样在使用时只需要少量的样板代码。
   - **Redux** 需要手动管理数据同步和更新，通常涉及到编写action、reducer以及使用中间件来处理异步逻辑，这可能会导致较多的样板代码。

4. **配置和样板代码**:
   - **React Query** 的使用通常更简洁，它提供了hooks，如`useQuery`和`useMutation`，这些API可以让你直接在组件中发起数据请求。
   - **Redux** 的配置和使用相对复杂，特别是在项目初始搭建时。你需要定义actions、reducers、创建store等，虽然Redux Toolkit可以帮助减少一些样板代码。

5. **开发哲学**:
   - **React Query** 倾向于提供一种简化的方式来处理服务器状态，它鼓励你直接从组件内部加载数据，而不需要将所有的数据都放到全局状态管理中。
   - **Redux** 遵循Functional Programming的原则，通过使用纯函数（reducers）和不可变数据来管理和更新状态，这样可以更容易地跟踪状态的变化和进行时间旅行调试。

6. **社区和生态**:
   - **React Query** 在异步数据管理方面很受欢迎，但是它的生态相较于Redux来说较小，因为它比较专注于数据获取和缓存。
   - **Redux** 有一个庞大的社区和生态系统，包括许多中间件和附加库，如redux-thunk, redux-saga, reselect, redux-form等。

### 例子:
假设你的应用需要从一个REST API获取用户列表，并且你希望显示的数据是最新的。使用**React Query**，你可以这样做：

```jsx
import { useQuery } from 'react-query';

function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  // Render your UI based on the data, error, and loading state...
}
```

在这个例子中，`fetchUsers`是一个异步函数，它向API请求数据。`useQuery`会自动处理数据的加载、缓存、重载和更新。

而在**Redux**中，你可能需要创建actions和reducers来处理异步请求，并使用例如`redux-thunk`的中间件来处理异步逻辑：

```jsx
import { useDispatch, useSelector } from 'react-redux';

function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  // Render your UI based on the users, error, and loading state...

React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。

**React Query** 是一个用于数据获取、缓存、同步和更新的库。它专注于处理异步数据操作，如从API检索数据、缓存结果以及自动重新获取数据。以下是React Query的一些关键特点：

- **自动缓存和无效化**：React Query自动缓存每次请求的结果，并在数据变化时提供重新获取数据的机制。
- **后台同步**：支持在数据变化或用户与应用程序互动时，自动在后台更新数据。
- **查询状态**: React Query 提供了丰富的状态信息，包括加载状态、错误状态、数据状态等，方便在UI中展示。
- **最小的全局状态管理**：React Query的目标是用最小的配置管理服务器状态。

**Redux** 是一个为JavaScript应用程序提供可预测状态容器的库，特别适合在React中使用。它主要用于管理和维护应用程序的全局状态，并提供一种模式来更新和访问这个状态。以下是Redux的一些关键特点：

- **全局状态管理**：Redux提供单一的全局状态树，所有状态的变化都通过派发行为(action)和归约器(reducers)的方式来管理。
- **可预测性**：因为所有的状态变化都遵循一个明确的流程，所以应用程序的行为是可预测的。
- **中间件**：Redux 支持使用中间件来扩展其功能，比如异步调用、日志记录等。
- **开发工具**：Redux拥有强大的开发工具，如Redux DevTools，可以帮助开发者追踪状态的变化和行为的派发。

**主要区别**：

1. **用途**：React Query主要用于数据同步，而Redux用于全局状态管理。
2. **数据管理**：React Query内置了数据获取和缓存的机制，而Redux需要开发者手动管理数据请求和响应结果。
3. **状态同步**：React Query提供自动的数据同步机制，Redux则需要结合额外的库（如redux-thunk或redux-saga）来处理异步逻辑。
4. **配置**：React Query减少了配置和样板代码的需要，Redux则需要更多的样板代码和配置步骤。
5. **开发体验**：React Query 的API设计更贴近React的hooks模式，而Redux通常需要遵循特定的设计模式和最佳实践。

例如，如果我们有一个用户列表，并且我们想通过React Query来获取这些用户，我们可能会这样做：

```javascript
import { useQuery } from 'react-query';

function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}
```

使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';

// Action creators
const fetchUsersRequest = () => ({ type: FETCH_USERS_REQUEST });
const fetchUsersSuccess = users => ({ type: FETCH_USERS_SUCCESS, payload:

What is the main difference between React Query and Redux?

当您想要同时分发多个 actions 时，Redux 本身并不提供直接的方法来同时分发它们，因为每个 `dispatch` 调用通常只处理一个 action。但是，有几种模式可以实现相似的效果：

### 1. 连续 Dispatch
最简单的方法就是连续调用几次 `dispatch`，每个调用分发一个 action。

```javascript
dispatch(actionCreator1());
dispatch(actionCreator2());
dispatch(actionCreator3());
```

这种方法的缺点是它可能会导致多次重新渲染，如果每个 action 都会改变 Redux 状态的话。

### 2. 批量 Dispatch（中间件）
您可以使用中间件来扩展 Redux 的功能，比如 `redux-batch`，它允许您将多个 actions 打包成单个批量 action，然后由中间件展开并逐一分发。

```javascript
import { batchDispatchMiddleware } from 'redux-batch';

// 应用中间件
const store = createStore(
  reducer,
  applyMiddleware(batchDispatchMiddleware)
);

// 分发批量 actions
store.dispatch(batchActions([actionCreator1(), actionCreator2(), actionCreator3()]));
```

这种方法可以减少不必要的重新渲染，因为状态更新是在所有 actions 都被处理后才发生的。

### 3. Promise 中 Dispatch
如果您的 actions 是异步的，您可以在一个 Promise 中链式调用它们，使用 `Promise.all` 或者 `async/await`。但是这只适用于异步 actions，并且它们仍然是逐个处理的，并不是真正的同时。

```javascript
Promise.all([
  dispatch(asyncActionCreator1()),
  dispatch(asyncActionCreator2()),
  dispatch(asyncActionCreator3()),
]);
```

或者使用 `async/await`：

```javascript
async function dispatchMultipleActions() {
  await dispatch(asyncActionCreator1());
  await dispatch(asyncActionCreator2());
  await dispatch(asyncActionCreator3());
}
```

### 4. 自定义 Action Creators
您可以创建一个 action creator，它返回一个函数（thunk）而不是一个 action 对象。这个函数可以分发多个 actions。

```javascript
const compositeAction = () => (dispatch, getState) => {
  dispatch(actionCreator1());
  dispatch(actionCreator2());
  dispatch(actionCreator3());
};

// 然后使用
dispatch(compositeAction());
```

这种方法通常是与 `redux-thunk` 中间件一起使用的。

---

在实际应用中，连续分发是最简单和最直接的方法，但如果你想要避免多次渲染，则批量分发或者封装 actions 的方法会比较有效。重要的是要评估你的应用性能需求和状态更新的复杂性，选择最适合你情况的方案。

根据[文档](https://redux.js.org/advanced/asyncactions#async-action-creators)推荐的方法是在操作创建者中，如下所示：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload))
            dispatch(action2(payload))
        }
    }
    

[然后，您可能希望将操作创建者作为 prop 附加，并使用此处](https://github.com/reduxjs/react-redux/blob/master/docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md)`mapDispatchToProps`提到的示例将其传递到容器。所以它看起来像这样：[](https://github.com/reduxjs/react-redux/blob/master/docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md)

    const mapDispatchToProps = dispatch => ({
       action1: some_payload => dispatch(action1(some_payload))
       action2: some_payload => dispatch(action2(some_payload))
    })
    
    // your component
    export default connect(mapStateToProps, mapDispatchToProps)(YourApp)
    

* * *

正如其他人指出的那样，`The action creator`这是调度多个操作的正确位置。

下面的示例`action1`说明了如何在您的`action creator`.

    const action1 = id => {
      return dispatch => {
        dispatch(action2(id))
        dispatch(action3(id))
      }
    }

动作创建者是分派多个动作的正确位置。尽管像下面这样的代码可以工作：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload))
            dispatch(action2(payload))
        }
    }
    

我强烈建议`redux-thunk`基于操作的创建者始终返回已解决的 Promise，以便此类操作创建者可以成为另一个异步调用的一部分。因此，对上述内容最简单的更新是：

    function actionCreator(payload) {
        return dispatch => {
            dispatch(action1(payload));
            dispatch(action2(payload));
            return Promise.resolve();
        }
    }
    

`actionCreator(payload).then(doAnotherAction(anotherPayload))` 如果我们需要维护调用顺序， 则可以使用以下内容分派到上面： 或以下内容：`actionCreator(payload).then(() => doAnotherAction(anotherPayload))`

如果您希望您的动作创建器“面向未来”，以便它可以处理调用异步和同步动作创建器，您可以将其编写为：

    function actionCreator(payload) {
        return dispatch =>
            Promise.resolve(dispatch(action1(payload))).then(
            () => dispatch(action2(payload)));
    }
    

而且，如果你喜欢 ES6 箭头表示法，上面的可以定义为：

    const actionCreator = payload => dispatch =>
            Promise.resolve(dispatch(action1(payload))).then(
            () => dispatch(action2(payload)));

如果您有[Promise Middleware](https://github.com/klis87/redux-saga-requests#promise-middleware-arrow_up)，您可以使用此语法，这样您就可以`.then()`在您的`dispatch(topLevelAction())`：

    export const topLevelAction = () => dispatch => {
        return Promise.all([dispatch(action1()), dispatch(action2()), dispatch(action3())])
    }

虽然@GibboK 的解决方案对我不起作用：

    const mapDispatchToProps = (dispatch) => ({
      action2: id => dispatch(Actions.action2(id)),
      action3: id => dispatch(Actions.action3(id)),
      action1: (dateId, attrId) => {
        return dispatch => {
          dispatch(Actions.action2(dateId));
          dispatch(Actions.action3(attrId));
        }
      }
    });
    

我最终选择了[redux-batched-actions](https://github.com/tshelburne/redux-batched-actions)。像魅力一样工作：

    const mapDispatchToProps = (dispatch) => ({
      action2: id => dispatch(Actions.action2(id)),
      action3: id => dispatch(Actions.action3(id)),
      action1: (dateId, attrId) =>
        dispatch(batchActions([
          Actions.action2(dateId),
          Actions.action3(attrId)
        ]))
    });

Where to dispatch multiple actions in redux

在 Redux 中，您可以使用 `applyMiddleware` 函数来添加多个中间件。`applyMiddleware` 是 Redux 的一个内置函数，它允许您将中间件链接到 Redux 的 dispatch 方法上。当您创建 Redux store 的时候，可以通过这种方式来增强 store 的功能。

下面是如何使用 `applyMiddleware` 来添加多个中间件的一个基本例子，假设我们有两个中间件 `middleware1` 和 `middleware2`：

```javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// 创建中间件实例
const middleware1 = thunk;
const middleware2 = logger;

// 使用`applyMiddleware`函数结合多个中间件
const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2)
);

export default store;
```

在这个例子中，中间件 `thunk` 用于支持异步 action creator，而 `logger` 用于在每次 action 被派发时在控制台中打印日志信息。这两个中间件通过 `applyMiddleware` 函数按照顺序被添加到 store 中。Redux 会按照提供给 `applyMiddleware` 的顺序来调用这些中间件，因此在上面的代码中，`thunk` 中间件会先于 `logger` 中间件处理 actions。

值得注意的是，中间件的执行顺序很重要，因为某些中间件可能依赖于前面中间件的处理结果。因此，在添加多个中间件时，应当考虑它们之间的依赖关系及执行顺序。

[applyMiddleware](http://redux.js.org/docs/api/applyMiddleware.html)将每个中间件作为新参数（而不是数组）。因此，只需传入您想要的每个中间件即可。

    const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

安迪的回答很好，但是，考虑到你的中间件不断增长，下面的代码会更好：

    const middlewares = [ReduxThunk, logger]
    applyMiddleware(...middlewares)

`applyMiddleware`应作为第二个参数传递给 createStore。`applyMiddleware`可以有多个中间件作为参数。

    const store = createStore(reducers, applyMiddleware(ReduxThunk, logger));
    
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.querySelector('#app')
    );

**这是应用一个或多个中间件的方法：**

    import {createStore, applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    import logger from 'redux-logger';
    import {rootReducer} from "../reducers"; // Import your combined reducers ;)
    
    const middleWares = [thunk, logger]; // Put the list of third part plugins in an array 
    
    // Create the store with the applied middleWares and export it
    export const store = createStore(rootReducer, applyMiddleware(...middleWares));
    

**现在导入最近在 index.js 中导出的存储并将其传递给 Provider 组件。您的 index.js 文件应如下所示：**

……

    import {Provider} from 'react-redux';
    import {store} from './store';
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>, 
    document.getElementById('root'));
    

就这样 ！

您可以简单地以逗号分隔的方式传递中间件，如下代码所示：

`const store = createStore(reducer, applyMiddleware(thunk, logger));`

注意：请导入顶部的 applyMiddlware、thunk 和 logger。

How to add multiple middleware to redux

`compose` 函数在 Redux 中的主要作用是实现从右到左的函数组合。在 Redux 的上下文中，它通常用于中间件、增强器（enhancers）或者将多个函数组合成一个函数的场景。

函数组合是一种在函数式编程中常见的概念，它允许你把多个函数组合成一个单一的函数。组合后的函数将从右到左执行各个单独的函数，这意味着最右边的函数的输出将成为右边邻近函数的输入，以此类推，直到最左边的函数。

`compose` 函数的签名大概如下所示：

```javascript
compose(...functions)
```

每个 `function` 都是将接收一个值然后返回一个值的函数。当你调用 `compose` 生成的函数时，你给它传递的参数将会被最右边的函数接收，并且每个函数的输出都将成为下一个函数的输入。

例如，如果你有这样几个函数：

```javascript
function print(input) {
  console.log(input);
  return input;
}

function multiplyBy5(input) {
  return input * 5;
}

function subtract2(input) {
  return input - 2;
}
```

如果你想要创建一个新函数，这个新函数能够先执行 `subtract2`，然后执行 `multiplyBy5`，最后执行 `print`，你可以使用 `compose`：

```javascript
const composedFunction = compose(print, multiplyBy5, subtract2);
```

当你调用 `composedFunction(10)` 时，将会按照以下的顺序执行操作：

1. `subtract2(10)` 会先执行，返回 `8`。
2. `multiplyBy5(8)` 会拿到 `8` 并返回 `40`。
3. `print(40)` 拿到 `40` 并将其打印出来。

在 Redux 中，`compose` 函数常常用于中间件的组合。例如，在配置 Redux store 时，你可能需要将多个中间件和 Redux DevTools 扩展组合起来，以增强 `createStore`。这通常是通过 `compose` 函数来完成的。

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  composeEnhancers(
    applyMiddleware(thunk)
    // 可以在这里添加更多的中间件
  )
);
```

在这个场景中，`composeEnhancers` 利用了 Redux DevTools 扩展的能力，并且与 `applyMiddleware` 结合，将 `thunk` 中间件应用到了 store 的创建过程中。这样，你就能够在开发过程中更方便地调试异步操作以及其他可能会修改状态的操作。

**提高可读性和便利性是使用 compose 的主要优点。**

当您想要将多个存储增强器传递到存储时，可以使用_Compose 。_存储增强器是高阶函数，可为存储添加一些额外的功能。默认情况下，Redux 提供的唯一存储增强器是_applyMiddleware_，但是还有许多其他可用的增强器。

**存储增强器是高阶函数**

什么是高阶函数？摘自[Haskell 文档](http://learnyouahaskell.com/higher-order-functions)：

> 高阶函数可以将函数作为参数并返回函数作为返回值。执行其中任一操作的函数称为高阶函数

来自 Redux 文档：

> compose 所做的只是让您编写深度嵌套的函数转换，而不会导致代码向右漂移。不要给予它太多的信任！

因此，当我们链接高阶函数（存储增强器）而不必编写时

    func1(func2(func3(func4))))
    

我们可以写

    compose(func1, func2, func3, func4)
    

这两行代码做同样的事情。只是语法不同。

**终极版示例**

从[Redux 文档](https://paulkogel.gitbooks.io/redux-docs/content/docs/api/compose.html)来看，如果我们不使用_compose，_我们就会有

    finalCreateStore =
        applyMiddleware(middleware)(
          require('redux-devtools').devTools()(
            require('redux-devtools').persistState(
              window.location.href.match(/[?&]debug_session=([^&]+)\b/)
            )()
          )
        )(createStore);
    

而如果我们使用_compose_

    finalCreateStore = compose(
        applyMiddleware(...middleware),
        require('redux-devtools').devTools(),
        require('redux-devtools').persistState(
          window.location.href.match(/[?&]debug_session=([^&]+)\b/)
        )
      )(createStore);
    

要了解有关 Redux 撰写功能的更多信息，[请单击此处](https://paulkogel.gitbooks.io/redux-docs/content/docs/api/compose.html)

检查原始[`compose`源代码](https://github.com/reduxjs/redux/blob/39cc043c55a770503bab3daf6026da5340923632/src/compose.js)也可能很有用，因为它在纯 JavaScript 中只有 10 个 loc。

How to understand compose functions in redux

**Redux**:
Redux 是一个独立的状态管理库，它可以与任何JavaScript应用一起使用。Redux的核心思想是维护一个单一的全局状态对象，这个状态对象是不可变的。当我们想要改变状态时，我们会派发（dispatch）一个行为（action），这是一个描述发生了什么的普通对象。然后这个action被送到reducer函数，reducer函数决定如何根据action的类型及其数据来改变状态。

例如，在一个计数器应用中，你可能有一个action `{ type: 'INCREMENT' }`，和一个reducer，当遇到这个action时，它会将状态中的计数值加一。

**React-Redux**:
React-Redux 是Redux的官方React绑定，它使得我们可以容易地将Redux和React应用程序连接起来。它提供了 `<Provider>`组件，使得Redux store能够被整个应用访问，以及 `connect()`函数，可以将React组件连接到Redux store。在新的React Redux版本中，`connect()`函数的功能也可以通过 `useSelector`和 `useDispatch`这样的React hooks来实现。

举一个例子，假设你有一个展示计数器值的React组件，你可以使用 `useSelector` hook来获取当前的计数值，并使用 `useDispatch`来派发INCREMENT或DECREMENT这样的actions。

**Redux-Thunk**:
Redux-Thunk 是Redux的一个中间件，它允许我们在action创建函数中执行异步操作。传统的action创建函数返回一个action对象，但是使用redux-thunk后，我们可以返回一个函数，这个函数接收 `dispatch`和 `getState`作为参数。这使得在action创建函数中可以进行异步API调用，并且在数据到达时派发普通的同步action。

比如，如果你有一个异步操作，需要从服务器加载一些数据，你可能会有一个thunk action创建函数，它在开始加载时派发一个 `{ type: 'LOADING_DATA' }`的action，在数据加载成功后派发 `{ type: 'DATA_LOADED', payload: data }`，并且在出现错误时派发 `{ type: 'LOADING_ERROR', error: error }`。 

总的来说，Redux是构建状态管理系统的基础，React-Redux是将Redux集成到React应用中的工具，而Redux-Thunk则是扩展Redux以处理异步操作的中间件。三者合作可以创建一个既可以处理同步也可以处理异步逻辑的强大的React应用状态管理系统。

> 1.  有人可以清楚地解释 redux 中控制流是如何发生的吗？

Redux（始终）有一个存储。

1.  每当您想要替换商店中的状态时，您都可以调度一个操作。
    
2.  该动作由一个或多个减速器捕获。
    
3.  减速器创建一个新状态，该状态结合了旧状态和分派的操作。
    
4.  商店订阅者会收到有新状态的通知。
    

> 2.  组件/容器/动作/动作创建者/存储在 redux 中的作用是什么？

*   Store - 保存状态，当新操作到达时，运行调度 -> 中间件 -> 缩减器管道，并在状态被新状态替换时通知订阅者。
    
*   组件 - 不直接了解状态的哑视图部分。也称为演示组件。
    
*   容器 - 使用react-redux 感知状态的视图片段。也称为智能组件、高阶组件
    

* * *

请注意，容器/智能组件与哑组件只是构建应用程序的好方法。

* * *

*   操作 - 与 Flux 相同 - 具有类型和有效负载的命令模式。
    
*   动作创建者 - 创建动作的 DRY 方式（不是绝对必要的）
    

> 3.  redux/react-redux/redux-thunk/任何其他之间的区别？

*   [redux](https://github.com/reactjs/redux) - 像通量一样的流，具有单个商店，可以在您喜欢的任何环境中使用，包括 vanilla js、react、Angular 1/2 等...
    
*   [React-Redux](https://github.com/reactjs/react-redux) - Redux 和 React 之间的绑定。该库提供了一组[反应钩子](https://react-redux.js.org/api/hooks)\- `useSelector()`，`useStore()`从存储中获取数据，并`useDispatch()`调度操作。您还可以使用该[`connect()`](https://react-redux.js.org/api/connect)函数创建 HoC（高阶组件），它监听存储的状态更改，为包装的组件准备 props，并在状态更改时重新渲染包装的组件。
    
*   [redux-thunk](https://github.com/gaearon/redux-thunk) - 中间件，允许您编写返回函数而不是操作的操作创建器。thunk 可用于延迟操作的分派，或仅在满足特定条件时分派。主要用于对 api 的异步调用，在成功/失败时调度另一个操作。
    

> 4.  如果您可以发布任何简单而精确的 redux 教程的链接，那将非常有帮助。

*   [Redux 官方文档](https://redux.js.org/introduction/getting-started)
    
*   [Redux 入门](https://egghead.io/courses/getting-started-with-redux)
    
*   [使用惯用的 Redux 构建 React 应用程序](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)
    
*   [展示组件和容器组件](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ntt3yarhm)

回答你的标题问题：

> redux、react-redux、redux-thunk 之间有什么区别？

1.  redux：主库（独立于React）
2.  redux-thunk：一个 redux 中间件，可以帮助您执行异步操作
3.  react-redux：将你的 redux 存储与 ReactComponents 连接起来

*   redux：用于管理应用程序状态的库。
*   react-redux：用于管理**React**应用程序（redux）状态的库。
*   redux-thunk：一个用于日志记录、崩溃报告、与异步 API 对话、路由等的中间件...

What are differences between redux react and redux thunk？

Redux-thunk 和 redux-promise 都是用于在 Redux 状态管理库中处理异步操作的中间件，但它们在处理异步动作时的方式存在差异。以下是它们各自的特点和区别：

### Redux-thunk

**特点**:
- Redux-thunk 是一个中间件，允许我们在 action creators 里面创建返回函数而不是返回 action 对象的能力。
- 这个返回的函数接收 `dispatch` 和 `getState` 作为参数，可以执行异步操作，并且在操作完成后手动调用 `dispatch`。
- Thunk 是一个允许我们写更多复杂异步逻辑的工具，包括序列化的异步调用、延迟异步调用等。

**例子**:
```javascript
// Action creator 返回一个函数（thunk）
export const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    return fetch('/my-api-endpoint')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', error }));
  };
};
```

在上面的例子中，`fetchData` 函数不是返回一个 action 对象，而是返回一个函数。这个函数可以执行异步请求并在请求完成后通过 `dispatch` 发送一个新的 action。

### Redux-promise

**特点**:
- Redux-promise 是另一种 Redux 异步中间件，它专注于处理返回 promise 对象的 action。
- 当一个 action creator 返回一个 promise 时，redux-promise 中间件会等待这个 promise 解决，并且自动发送一个带有解决值的 action 或者在 promise 被拒绝时发送一个带有错误信息的 action。

**例子**:
```javascript
// Action creator 返回一个携带 promise 的 action 对象
export function fetchData() {
  return {
    type: 'FETCH_DATA',
    payload: fetch('/my-api-endpoint').then(response => response.json())
  };
};
```

在这个例子中，`fetchData` 函数返回一个包含 `type` 和 `payload` 的 action 对象。 `payload` 是一个 promise，由 redux-promise 自动处理。

### 区别

1. **返回值**: 
   - Redux-thunk 允许 action creators 返回函数（thunk），这些函数可以执行任何异步逻辑并调用 `dispatch`。
   - Redux-promise 要求 action creators 返回一个 promise 作为 `payload` 的 action 对象。

2. **复杂异步流程控制**:
   - Redux-thunk 可以实现更复杂的异步流程控制，如条件分支、延迟异步调用、连续异步调用等。
   - Redux-promise 对异步控制的支持较为简单，主要是针对单一的异步操作。

3. **易用性**:
   - Redux-thunk 提供的灵活性更高，但是需要开发者手动处理 dispatch。
   - Redux-promise 使用起来更简单，只需返回 promise 即可，但它的灵活性不如 thunk。

综上所述，redux-thunk 提供了对异步操作更精细和复杂控制的能力，而 redux-promise 则提供了一种简洁的处理异步请求的方式，适用于更简单的场景。开发者可以根据实际项目需求选择最合适的工具。

`redux-thunk`允许您的动作创建者返回一个函数：

    function myAction(payload){
        return function(dispatch){
            // use dispatch as you please
        }
    }
    

`redux-promise`允许他们返回一个承诺：

    function myAction(payload){
        return new Promise(function(resolve, reject){
            resolve(someData); // redux-promise will dispatch someData
        });
    }
    

如果您需要异步或有条件地分派操作，这两个库都很有用。`redux-thunk`还允许您在一个动作创建器中多次调度。无论您选择其中之一、另一个还是两者都完全取决于您的需求/风格。

您可能希望/需要在您的应用程序中同时使用两者。**从 redux-promise 开始用于常规的 Promise 生成异步任务，然后随着复杂性的增加而扩展以添加 Thunk（或 Sagas 等）**：

*   当生活很简单时，您只需与返回单个承诺的创建者进行基本的异步工作，然后`redux-promise`将改善您的生活并简化它，快速而轻松。（简而言之，当你的 Promise 解决时，你不需要考虑“拆开”它们，然后编写/发送结果，redux-promise(-middleware) 会为你处理所有那些无聊的事情。）
*   但是，当出现以下情况时，生活会变得更加复杂：
*   也许你的动作创建者想要产生几个承诺，你想将它们作为单独的动作分派到单独的减速器？
*   或者，在决定如何以及在何处分派结果之前，您需要管理一些复杂的预处理和条件逻辑？

在这些情况下，**它的好处`redux-thunk`是它允许您将复杂性封装在 action-creator 中**。

但请注意，_如果您的 Thunk 生成并分派 Promise，那么您将需要同时使用这两个库_：

*   Thunk 将编写原始操作并分派它们
*   `redux-promise`然后将在减速器处处理由 Thunk 生成的各个 Promise 的解包，以避免产生样板文件。（你_可以_用 Thunks 做所有事情，`promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)`但为什么要这么做呢？）

* * *

总结用例差异的另一种简单方法：**Redux 操作周期的开始与结束**：

*   Thunk 用于Redux 流程的_开始_：如果您需要创建一个复杂的操作，或者封装一些粗糙的操作创建逻辑，将其排除在组件之外，并且绝对排除在减速器之外。
*   `redux-promise`是在流程_结束时_，一旦所有内容都归结为简单的承诺，并且您只想打开它们并将其已解决/拒绝的值存储在商店中

* * *

注释/参考文献：

*   我发现`redux-promise-middleware`这是对原始想法的更完整和更容易理解的实现`redux-promise`。它正在积极开发中，并且也得到了很好的补充`redux-promise-reducer`。
*   还有其他类似的中间件可用于组合/排序复杂的操作：一种非常流行的中间件是`redux-saga`，它与 非常相似`redux-thunk`，但基于生成器函数的语法。同样，您可能会将它与 结合使用`redux-promise`，因为 sagas Produce 承诺您不希望使用大量样板手动打开和处理...
*   这是一篇[很棒的文章，](https://medium.com/react-native-training/redux-4-ways-95a130da0cdc#.plivi8f61)直接比较了各种异步组合选项，包括 thunk 和 redux-promise-middleware。（TL;DR：_“与其他一些选项相比，Redux Promise 中间件极大地减少了样板代码”_ …… _“我想我喜欢 Saga 来处理更复杂的应用程序_（阅读：“使用”），_而 Redux Promise 中间件则适合其他一切。”_）
*   请注意，有一个重要的情况，您可能认为需要分派多个操作，但实际上不需要，并且您可以使简单的事情变得简单。这就是您只希望多个减速器对单个异步调用做出反应的地方，并且您倾向于向这些多个减速器分派多个操作。但是，_多个减速器完全没有理由不能监视单个操作类型。_您只想确保您的团队知道您正在使用该约定，因此他们不会假设只有一个减速器（具有相关名称）可以处理给定的操作。

全面披露：我对 Redux 开发相对较新，并且自己也为这个问题而苦苦挣扎。我将解释我找到的最简洁的答案：

当调度操作时，ReduxPromise 返回一个 Promise 作为有效负载，然后 ReduxPromise 中间件解析该 Promise 并将结果传递给减速器。

另一方面，ReduxThunk 强制操作创建者推迟实际将操作对象分派给减速器，直到调用分派为止。

这是我找到此信息的教程的链接： https: [//blog.tighten.co/react-101-part-4-firebase](https://blog.tighten.co/react-101-part-4-firebase)。

What is the difference between redux thunk and redux promise

Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理方式，适用于广泛的使用场景，而XState通过状态机和状态图提供了对状态的严格管理，非常适合处理更复杂的状态逻辑。选用哪一个通常取决于应用的需求以及开发团队对于状态管理的偏好。

**集成和生态系统**：
- **Redux** 拥有一个非常成熟和广泛的生态系统。有大量的中间件可用，比如`redux-thunk`和`redux-saga`，用于处理副作用；有开发工具如Redux DevTools，用于调试。
- **XState** 虽然相对年轻，但其生态系统正在快速发展。它提供了与多个框架集成的能力，例如与React的`@xstate/react`。

**学习曲线**：
- 对于初学者来说，**Redux** 的概念可能需要一段时间来适应，尤其是对于不熟悉函数式编程概念的开发者。理解如何组织actions、reducers和中间件可能会有一定难度。
- **XState** 要求开发者理解状态机的理论和概念，这本身就是一个复杂性的来源。但对于已经熟悉状态机理论的开发者来说，XState可以更直观和直接地映射他们的思维。

**性能考量**：
- 在大型应用中，**Redux** 需要特别注意性能问题，因为每个action都可能导致整个状态树被遍历和潜在的重新渲染。
- **XState** 通过状态图确保只有相关的状态和逻辑被激活和执行，这可能在某些情况下带来性能优势。

### 结论

在选择状态管理方案时，重要的是要考虑应用的特定需求。如果你的应用包含了许多不同状态，这些状态之间有复杂的转换规则，那么XState可能是一个更好的选择，因为它可以帮助你以结构化和声明式的方式组织这些逻辑。而如果你的应用需要广泛的状态管理，并且你想要更直接的控制状态变化的方式，Redux可能更适合。无论如何，两者都是强大的工具，能够帮助你构建可维护和可扩展的前端应用。

我创建了 XState，但我不会告诉您是否使用其中之一；这取决于你的团队。相反，我将尝试强调一些关键差异。

终极版

X状态

本质上是一个状态容器，其中事件（在 Redux 中称为_操作_）被发送到更新状态的减速器

也是一个状态容器，但将有限状态（例如，`"loading"`，`"success"`）与“无限状态”或上下文（例如，`items: [...]`）分开

不规定你如何定义你的减速器 - 它们是简单的函数，在给定当前状态和事件（动作）的情况下返回下一个状态

“带有规则的减速器” - 您定义由于事件而导致的有限状态之间的合法转换，以及应在转换中执行哪些操作（或在进入/退出状态时）

没有内置_的_方法来处理副作用；有很多社区选项，例如 redux-thunk、redux-saga 等。

使操作（副作用）具有声明性和显式性 - 它们是`State`每次转换（当前状态 + 事件）时返回的对象的一部分

目前无法可视化状态之间的转换，因为它无法区分有限状态和无限状态

有一个可视化工具： https: [//statecharts.github.io/xstate-viz](https://statecharts.github.io/xstate-viz)由于声明性性质，这是可行的

减速器中表示的隐式逻辑/行为无法以声明方式序列化（例如，在 JSON 中）

表示逻辑/行为的机器定义可以序列化为 JSON，并从 JSON 中读取；这使得行为非常可移植并且可以通过外部工具进行配置

严格来说不是一个状态机

严格遵守 W3C SCXML 规范：[https ://www.w3.org/TR/scxml/](https://www.w3.org/TR/scxml/)

依赖开发人员手动防止不可能的状态

使用状态图自然地定义处理事件的边界，这可以防止不可能的状态并且可以进行静态分析

鼓励使用单一的“全局”原子存储

鼓励使用类似 Actor 模型的方法，其中可以有许多相互通信的分层状态图/“服务”实例

本周我将在文档中添加更多关键差异。

**状态机**不会告诉（强制）您具有单向数据流。与数据流无关。它更多的是关于**约束状态变化**和**状态转换**。因此，通常只有应用程序的某些部分会使用状态机进行设计，仅当您需要_约束/禁止_某些状态更改并且您对转换_感兴趣时_。

请注意，对于状态机，如果由于某种原因（外部 API 依赖等...），应用程序可能会被锁定在由于约束而无法转换到另一个状态的状态，您必须解决它。

**但是，**如果您只对最后一个应用程序状态本身感兴趣，而不是_状态转换_，并且状态约束并不重要，那么您最好不要使用状态机并直接更新状态本身（**您仍然可以通过以下方式将状态包装在 Singleton 类更新中）动作类**）。

* * *

另一方面，**Redux**是**单向架构框架**。单向架构强制您拥有单一方向的数据流。在 Redux 中，它以`User->View->(Action)->Store->Reducer->(Middleware)->Store->(State)->View`. 与状态机一样，您可以使用 Redux 中的中间件触发副作用。如果需要，您可以限制/禁止状态转换。**与状态机不同**，Redux强制数据单向流动，**纯粹**！减速器函数、不可变状态对象、单个可观察的应用程序状态。

下面是我的一些观点。

*   UI 状态和业务/后端状态在 redux 中耦合在一起。因此，UI 或业务状态的每次更新都会在 Redux 存储中创建数据更新。
*   Xstate 将 UI 状态和后端状态解耦。
*   在 redux 中，所有节点都存在于根节点内。Xstate 在独立机器内分散和分发数据。
*   应用程序只能在已经定义的状态之间转换。因此任何错误或错误都可以在机器本身中修复。
*   内部状态由机器本身在 Xstate 中管理。Redux 将新状态表示为标志。
*   渲染器竞争 - 将尽可能多的状态提升到机器中，如果需要，我们可以相对轻松地切换渲染框架（例如从 React 到 vue）。
*   Contexts 提供了具体的类来向外界呈现单个接口。

Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理

Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理
方式，适用于广泛的使用场景，而XState通过状态机和状态图提供了对状态的严格管理，非常适合处理更复杂的状态逻辑。选用哪一个通常取决于应用的需求以及开发团队对于状态管理的偏好。

**集成和生态系统**：
- **Redux** 拥有一个非常成熟和广泛的生态系统。有大量的中间件可用，比如`redux-thunk`和`redux-saga`，用于处理副作用；有开发工具如Redux DevTools，用于调试。
- **XState** 虽然相对年轻，但其生态系统正在快速发展。它提供了与多个框架集成的能力，例如与React的`@xstate/react`。

**学习曲线**：
- 对于初学者来说，**Redux** 的概念可能需要一段时间来适应，尤其是对于不熟悉函数式编程概念的开发者。理解如何组织actions、reducers和中间件可能会有一定难度。
- **XState** 要求开发者理解状态机的理论和概念，这本身就是一个复杂性的来源。但对于已经熟悉状态机理论的开发者来说，XState可以更直观和直接地映射他们的思维。

**性能考量**：
- 在大型应用中，**Redux** 需要特别注意性能问题，因为每个action都可能导致整个状态树被遍历和潜在的重新渲染。
- **XState** 通过状态图确保只有相关的状态和逻辑被激活和执行，这可能在某些情况下带来性能优势。

### 结论

在选择状态管理方案时，重要的是要考虑应用的特定需求。如果你的应用包含了许多不同状态，这些状态之间有复杂的转换规则，那么XState可能是一个更好的选择，因为它可以帮助你以结构化和声明式的方式组织这些逻辑。而如果你的应用需要广泛的状态管理，并且你想要更直接的控制状态变化的方式，Redux可能更适合。无论如何，两者都是强大的工具，能够帮助你构建可维护和可扩展的前端应用。

What is an actual difference between redux and a state machine(eg xstate)

当选择状态管理库的中间件时，Redux-Observable 和 Redux-Saga 都是强大的选择，它们各自有不同的优点。选择使用 Redux-Observable 的理由可能包括以下几点：

### 响应式编程与RxJS
Redux-Observable 基于 RxJS，这是一个响应式编程库，它可以让你使用 Observables 处理异步事件和基于流的编程。如果团队已经熟悉响应式编程范式，或者项目中已经在使用RxJS，那么使用 Redux-Observable 会更有意义，因为它可以让你利用已有的知识和代码库。

**示例：**
假如我们有一个需要处理多个不同数据流的复杂应用程序，比如实时股票价格更新、用户操作和网络请求等。使用 RxJS，我们可以创建一个统一的流来处理这些信息，并且可以很容易地通过各种操作符来合并、过滤、转换这些流。

### 操作符丰富
RxJS 提供了强大的操作符集合，这使得在复杂场景下处理异步操作变得更加灵活和强大。比如，可以使用 `debounceTime`、`throttleTime`、`switchMap`、`mergeMap`、`concatMap` 等操作符来进行节流、防抖、取消之前的请求等。

**示例：**
考虑一个自动完成的输入框，我们希望在用户输入时调用一个 API 来显示建议，但我们不希望在每次按键上都做这个调用，而是希望在输入稳定后进行。我们可以使用 `debounceTime` 操作符来实现这一点，它会等待一段时间直到没有新的输入，然后才执行 API 调用。

### 更紧密的集成
Redux-Observable 允许开发者以一种更紧密集成的方式将 action 创建者、异步流和 Redux store 结合起来。这样可以让你的 Epic（用于处理异步操作的函数）在不影响 UI 组件的情况下访问当前的 store 状态并且派发多个 action。

**示例：**
假设我们需要根据用户的一系列行为来触发不同的 action。例如，在用户登录成功后，我们可能需要获取用户的个人信息、加载用户的偏好设置等。在 Redux-Observable 中，我们可以在一个 Epic 中监听登录成功的 action，然后使用 RxJS 操作符链来处理这个复杂的流程。

### 流控制和错误处理
在 RxJS 中，流的概念和错误处理是一级公民。这意味着开发者可以以一种声明式的方式来管理流的生命周期和错误，这在某些应用场景下可能比 Redux-Saga 的 Generator 函数更方便。

**示例：**
想象一个情况，我们正在处理网络请求，并希望在请求失败时进行重试。RxJS 提供了 `retry` 或 `retryWhen` 操作符，这让我们可以简单地实现这种复杂的逻辑。

### 总结
选择 Redux-Observable 的理由通常取决于开发团队对响应式编程的偏好，以及对 RxJS 的熟悉程度。如果开发者已经习惯于使用 RxJS，并且希望能够利用其提供的强大功能来处理复杂的异步或基于流的场景，那么 Redux-Observable 是一个非常合适的选择。相比之下，如果团队更熟悉传统的 JavaScript 和异步处理方式，Redux-Saga 可能会更符合他们的习惯。

免责声明：我是 redux-observable 的作者之一，所以我很难做到 100% 公正。

我们目前没有提供任何 redux-observable 比 redux-saga 更好的理由，因为……事实并非如此。😆

tl;dr 两者都有优点和缺点。许多人会发现其中一个比另一个更直观，但如果您不了解 RxJS (redux-observable) 或生成器/“效果作为数据”(redux-saga)，那么以不同的方式学习两者都会很复杂。
--------------------------------------------------------------------------------------------------------------

它们以极其相似的方式解决相同的问题，但存在一些根本性的差异，只有当您充分使用它们时，这些差异才会真正显现出来。

redux-observable 几乎将一切都推迟到惯用的 RxJS。所以如果你有 RxJS 知识（或获得它），学习和使用 redux-observable 是超级超级自然的。这也意味着这些知识可以转移到 redux 之外的其他事物上。如果您决定切换到 MobX，如果您决定切换到 Angular2，如果您决定切换到未来的热门 X，RxJS 很有可能可以帮助您。这是因为 RxJS 是一个通用的异步库，并且在很多方面本身就像一种编程语言——整个“反应式编程”范例。RxJS 自 2012 年起就存在，最初是作为 Rx.NET 的一个端口（几乎每种主要语言都有“端口”，它_很有用_）。

redux-saga 本身提供了基于时间的运算符，因此虽然您在此流程管理器风格中获得的有关生成器和处理副作用的知识是可以转移的，但实际的运算符和用法并未在任何其他主要库中使用。所以这有点不幸，但本身不应该成为破坏交易的因素。

它还使用“效果作为数据”（[此处描述](https://redux-saga.js.org/docs/basics/DeclarativeEffects.html)），一开始可能很难理解，但这意味着您的 redux-saga 代码本身并不实际执行副作用。相反，您使用的辅助函数会创建类似于任务的对象，这些任务代表执行副作用的意图，然后内部库会为您执行它。这使得测试变得非常容易，不需要模拟，并且对某些人来说非常有吸引力。然而，我个人发现这意味着你的单元测试重新实现了你的传奇的大部分逻辑——使得这些测试在我看来不是很有用（并不是每个人都同意这个观点）

人们经常问为什么我们不使用 redux-observable 做类似的事情：对我来说，它从根本上与正常的惯用 Rx 不兼容。在 Rx 中，我们使用类似的运算符`.debounceTime()`来封装去抖所需的逻辑，但这意味着如果我们想要制作一个实际上不执行去抖而是发出带有意图的任务对象的版本，那么您现在已经失去了Rx 的力量，因为你不能再仅仅链接运算符，因为它们将在该任务对象上进行操作，而不是操作的真实结果。这确实很难优雅地解释。它再次需要对 Rx 有深入的了解才能理解方法的不兼容性。如果你_真的_想要这样的东西，请查看[redux-cycles](https://github.com/cyclejs-community/redux-cycles#what-does-this-look-like)，它使用 Cycle.js 并且主要有这些目标。我发现这对我来说需要太多仪式，但如果你感兴趣的话，我鼓励你尝试一下。

正如 ThorbenA 提到的，我并不回避承认 redux-saga 目前（2016 年 10 月 13 日）是 redux 复杂副作用管理领域的明显领导者。它起步较早，拥有更强大的社区。因此，使用事实上的标准比新来的标准更有吸引力。我认为可以肯定地说，如果您在没有先验知识的情况下使用其中任何一个，您就会感到困惑。我们都使用相当先进的概念，一旦你“掌握”了这些概念，复杂的副作用管理就会变得容易得多，但在那之前很多人都会遇到困难。

我能给出的最重要的建议是，在需要这些库之前不要引入它们。如果您只进行简单的 ajax 调用，则可能不需要它们。redux-thunk 学习起来非常简单，并且提供了足够的基础知识——但是异步越复杂，redux-thunk 就越难（甚至不可能）。但对于 redux-observable/saga 在很多方面来说，异步越复杂，它就越闪耀。在同一项目中将 redux-thunk 与其他方法之一（redux-observable/saga）一起使用也有很多优点！redux-thunk 用于常见的简单内容，然后仅使用 redux-observable/saga 来处理复杂的内容。这是保持生产力的好方法，所以你不会为了那些用 redux-thunk 来说微不足道的事情而与 redux-observable/saga 作斗争。

我认为有些事情你需要考虑。

1.  复杂
2.  编码风格
3.  学习曲线
4.  可测试性

> 假设我们想从 API 获取用户

    // Redux-Saga
    
    import axios from 'axios' 
    
    function* watchSaga(){
      yield takeEvery('fetch_user', fetchUser) // waiting for action (fetch_user)
    }
    
    function* fetchUser(action){
        try {
            yield put({type:'fetch_user_ing'})
            const response = yield call(axios.get,'/api/users/1')
            yield put({type:'fetch_user_done',user:response.data})
      } catch (error) {
            yield put({type:'fetch_user_error',error})
      }
    }
    
    // Redux-Observable
    import axios from 'axios'
    
    const fetchUserEpic = action$ => 
        action$
            .ofType('fetch_user')
            .flatMap(()=>
              Observable.from(axios.get('/api/users/1')) // or use Observable.ajax
                .map(response=>({type:'fetch_user_done', user:response.data}))
                .catch(error => Observable.of({type:'fetch_user_error',error}))
                .startWith({type:'fetch_user_ing'})
            )
    

另外，我写这篇文章是为了深入比较 Redux-saga 和 Redux-Observable 之间的差异。请查看[此处的链接](https://hackmd.io/s/H1xLHUQ8e#side-by-side-comparison)或[演示文稿](https://hackmd.io/p/H1xLHUQ8e#/)。

我使用 Redux-Observable 而不是 Redux-Saga，因为我更喜欢使用 observables 而不是生成器。我将它与 RXJS 一起使用，这是一个用于处理数据流的强大库。可以把它想象成异步的 lodash。关于选择其中一个的任何缺点、陷阱和妥协，请看一下Jay Phelps 的[回答](https://stackoverflow.com/a/38597548/2491115)：

> redux-saga 作为一个项目比 redux-observable 存在的时间更长，因此这无疑是一个主要卖点。您会发现更多文档、示例，并且可能有更好的社区可以获得支持。
> 
> 相反的是，你在 redux-saga 中学习的运算符和 API 几乎不像学习 RxJS 那样可转移，而 RxJS 到处都在使用。redux-observable 内部超级超级超级简单，它实际上只是为您提供了一种使用 RxJS 的自然方式。因此，如果您了解 RxJS（或想要了解），那么它是非常合适的。
> 
> 目前我对大多数人的建议是，如果您不得不问应该使用哪一个，那么您可能应该选择 redux-saga。

Redux-Observable 是一个令人惊叹的库，我们在生产中使用它 1.5 年了，到目前为止没有任何问题，它完全可测试，并且可以轻松与任何框架集成。我们的并行套接字通道超载，唯一能避免冻结的就是 Redux-Observable

在这里我想提三点。

**1\. 复杂性和学习曲线**

Redux-saga 在这里轻松击败了 redux-observable。如果你只需要一个简单的请求来完成授权，并且由于某些原因你不想使用 redux-thunk，你应该考虑使用 redux-saga，它更容易理解。

如果您事先没有 Observable 的知识，这对您来说会很痛苦，您的团队将为您提供指导:)

**2\. Observable 和 RxJS 能为我提供什么？**

当谈到异步逻辑时，Observable 就是你的瑞士刀，Observable 几乎可以为你做所有事情。你永远不应该将它们与承诺或发电机进行比较，它的功能要强大得多，就像将擎天柱与雪佛兰进行比较一样。

那么 RxJS 呢？它就像 lodash.js，但对于异步逻辑，一旦你进入，你将永远不会切换到不同的东西。

**3\. 反应式扩展**

只需检查此链接

> [http://reactivex.io/languages.html](http://reactivex.io/languages.html)

反应式扩展适用于所有现代编程语言，它只是函数式编程的关键。

因此，明智地花时间学习 RxJS 并使用 redux-observable :)

我很看重 Rx 所具有的跨语言和运行时的可移植性。即使您的应用程序不会改变语言，您的职业生涯也可能会改变。无论您自己如何衡量，都可以在学习中获得最大的影响力。它是通往 .Net LINQ 的绝佳网关。

Why use redux observable over redux saga?

在Redux中，将状态写入`localStorage`通常是为了持久化某些数据，以便在页面刷新或关闭后再次访问时能够恢复这些数据。选择何时将状态写入`localStorage`通常取决于应用的具体需求，但以下是一些合适的时机：

1. **应用退出或页面关闭之前**：
   可以监听`window`上的`beforeunload`事件，在应用即将关闭前将当前状态保存到`localStorage`。这样做可以确保即使用户没有显式地保存他们的进度，他们的数据也不会丢失。

2. **状态更新时**：
   如果希望应用的状态实时同步到`localStorage`，可以在Redux的中间件中做这件事情。例如，你可以使用`redux-thunk`或`redux-saga`中间件在每次有相关action被分发且状态更新后，将新状态保存到localStorage。

3. **定期自动保存**：
   对于一些需要自动保存功能的应用，比如在线编辑器，可以设置一个定时器，每隔一定时间将当前状态保存到`localStorage`。

4. **特定的action被分发时**：
   可以在分发某些特定action，如`SAVE_DATA`，时将状态或状态的一部分保存到`localStorage`。

举个例子，假设你有一个在线待办事项应用，用户可以添加、编辑和删除待办事项。你可能希望在以下几种情况下将待办事项列表保存到`localStorage`：

- 用户新增、修改或删除待办事项后，确保这些更改即时保存。
- 用户关闭浏览器标签或窗口前，保证待办事项的最新状态被保留下来。
- 用户可以点击一个“保存”按钮显式地将待办事项列表保存到`localStorage`。

以下是一个简单的中间件示例，它会在每次action分发后同步状态到`localStorage`：

```javascript
const localStorageMiddleware = store => next => action => {
  const result = next(action);
  localStorage.setItem('my-app-state', JSON.stringify(store.getState()));
  return result;
};
```

然而，这里有一点很重要：不是所有的状态都应该存储在`localStorage`中，因为`localStorage`有容量限制，通常为5MB。因此，只有那些必要的、体积较小的状态才应该被持久化。同时，还需要考虑安全性因素，敏感信息绝不应该存储在`localStorage`中。

减速器从来都不是执行此操作的合适位置，因为减速器应该是纯粹的并且没有副作用。

我建议只在订阅者中执行此操作：

    store.subscribe(() => {
      // persist your state
    })
    

在创建存储之前，请阅读这些持久部分：

    const persistedState = // ...
    const store = createStore(reducer, persistedState)
    

如果您使用，`combineReducers()`您会注意到尚未收到状态的减速器将使用其默认`state`参数值正常“启动”。这非常方便。

建议您取消订阅者的抖动，这样就不会太快地写入 localStorage，否则会出现性能问题。

最后，您可以创建一个封装它的中间件作为替代方案，但我会从订阅者开始，因为它是一个更简单的解决方案并且可以很好地完成工作。

要填补 Dan Abramov 答案的空白，您可以`store.subscribe()`这样使用：

    store.subscribe(()=>{
      localStorage.setItem('reduxState', JSON.stringify(store.getState()))
    })
    

在创建存储之前，请检查`localStorage`并解析密钥下的任何 JSON，如下所示：

    const persistedState = localStorage.getItem('reduxState') 
                           ? JSON.parse(localStorage.getItem('reduxState'))
                           : {}
    

然后，您可以将此常量传递`persistedState`给您的`createStore`方法，如下所示：

    const store = createStore(
      reducer, 
      persistedState,
      /* any middleware... */
    )

简而言之：使用中间件[redux-persist](https://github.com/rt2zz/redux-persist)，或者自己写。

如果有人对上述解决方案有任何疑问，您可以写下自己的解决方案。让我告诉你我做了什么。忽略`saga middleware`事物，只关注两件事`localStorageMiddleware`和`reHydrateStore`方法。拉出`localStorageMiddleware`所有内容并将`redux state`其放入本地存储中（如果存在）并将其放入`local storage``rehydrateStore``applicationState``redux store`

    import {createStore, applyMiddleware} from 'redux'
    import createSagaMiddleware from 'redux-saga';
    import decoristReducers from '../reducers/decorist_reducer'
    
    import sagas from '../sagas/sagas';
    
    const sagaMiddleware = createSagaMiddleware();
    
    /**
     * Add all the state in local storage
     * @param getState
     * @returns {function(*): function(*=)}
     */
    const localStorageMiddleware = ({getState}) => { // <--- FOCUS HERE
        return (next) => (action) => {
            const result = next(action);
            localStorage.setItem('applicationState', JSON.stringify(
                getState()
            ));
            return result;
        };
    };
    
    
    const reHydrateStore = () => { // <-- FOCUS HERE
    
        if (localStorage.getItem('applicationState') !== null) {
            return JSON.parse(localStorage.getItem('applicationState')) // re-hydrate the store
    
        }
    }
    
    
    const store = createStore(
        decoristReducers,
        reHydrateStore(),// <-- FOCUS HERE
        applyMiddleware(
            sagaMiddleware,
            localStorageMiddleware,// <-- FOCUS HERE 
        )
    )
    
    sagaMiddleware.run(sagas);
    
    export default store;

基于其他答案（以及[Jam Creencia 的 Medium 文章](https://medium.com/@jrcreencia/persisting-redux-state-to-local-storage-f81eb0b90e7e)）中提供的出色建议和简短代码摘录，这是一个完整的解决方案！

我们需要一个包含 2 个函数的文件，用于将状态保存到本地存储或从本地存储加载状态：

    // FILE: src/common/localStorage/localStorage.js
    
    // Pass in Redux store's state to save it to the user's browser local storage
    export const saveState = (state) =>
    {
      try
      {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);
      }
      catch
      {
        // We'll just ignore write errors
      }
    };
    
    
    
    // Loads the state and returns an object that can be provided as the
    // preloadedState parameter of store.js's call to configureStore
    export const loadState = () =>
    {
      try
      {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null)
        {
          return undefined;
        }
        return JSON.parse(serializedState);
      }
      catch (error)
      {
        return undefined;
      }
    };

运行代码片段Hide results

展开片段

**这些函数由store.js**导入，我们在其中配置商店：

_注意：您需要添加一个依赖项：**`npm install lodash.throttle`**_

    // FILE: src/app/redux/store.js
    
    import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
    
    import throttle from 'lodash.throttle';
    
    import rootReducer from "./rootReducer";
    import middleware from './middleware';
    
    import { saveState, loadState } from 'common/localStorage/localStorage';
    
    
    // By providing a preloaded state (loaded from local storage), we can persist
    // the state across the user's visits to the web app.
    //
    // READ: https://redux.js.org/recipes/configuring-your-store
    const store = configureStore({
    	reducer: rootReducer,
    	middleware: middleware,
    	enhancer: applyMiddleware(...middleware),
    	preloadedState: loadState()
    })
    
    
    // We'll subscribe to state changes, saving the store's state to the browser's
    // local storage. We'll throttle this to prevent excessive work.
    store.subscribe(
    	throttle( () => saveState(store.getState()), 1000)
    );
    
    
    export default store;

运行代码片段Hide results

展开片段

该商店被导入到**index.js中，因此可以将其传递到包装****App.js**的Provider中：

    // FILE: src/index.js
    
    import React from 'react'
    import { render } from 'react-dom'
    import { Provider } from 'react-redux'
    
    import App from './app/core/App'
    
    import store from './app/redux/store';
    
    
    // Provider makes the Redux store available to any nested components
    render(
    	<Provider store={store}>
    		<App />
    	</Provider>,
    	document.getElementById('root')
    )

运行代码片段Hide results

展开片段

请注意，绝对导入需要对**YourProjectFolder/jsconfig.json**进行此更改- 这告诉它在第一次找不到文件时在哪里查找文件。否则，您会看到有关尝试从**src**外部导入某些内容的抱怨。

    {
      "compilerOptions": {
        "baseUrl": "src"
      },
      "include": ["src"]
    }

运行代码片段Hide results

展开片段

Redux相关问题