NPM 包 Redux-optimist 使用教程

引言

Redux-optimist 是一款非常实用的 Redux 插件，能够有效地减少 Redux 应用程序中的不必要重复操作。本文将讲解如何使用 Redux-optimist，让你更加快速、高效地处理状态变更。

安装

首先，你需要在你的项目中安装 Redux-optimist。可以使用 npm 进行安装：

npm install redux-optimist --save

配置

接下来，让我们来看一下 Redux-optimist 的配置。为了能够在应用程序中使用 Redux-optimist，你需要在 createStore 函数中将这个 middleware 添加到中间件数组中：

import { createStore, applyMiddleware } from 'redux';
import optimist from 'redux-optimist';
import rootReducer from '../reducers';

const store = createStore(rootReducer, {}, applyMiddleware(optimist));

使用

Redux-optimist 提供了一个 createOptimisticReducer 函数，用于创建一个包含乐观和悲观的状态对象。乐观和悲观状态的作用在于，当一个操作发生错误时，可以在这两种状态之间进行切换，从而避免重复性操作。

创建一个乐观的状态对象

import { createOptimisticReducer, OPTIMISTIC } from 'redux-optimist';

const initialState = {
  items: [],
  optimistic: false,
};

const reducer = createOptimisticReducer(initialState, OPTIMISTIC);

一旦创建了这个乐观状态对象，我们就可以开始对它进行更改。

更新乐观状态

我们可以使用 createAction 和 createActionWithOptimistic 可以创建一个有 无乐观状态的 action。在需要触发 action 的地方，我们应该使用 createActionWithOptimistic 组件，它将在更新操作成功时返回一个类型为 OPTIMISTIC 的 action。

import { createActionWithOptimistic } from 'redux-optimist';

const addItem = createActionWithOptimistic('ADD_ITEM');
const removeItem = createActionWithOptimistic('REMOVE_ITEM');

从状态中移除项目

为了从状态中移除一个项目，我们需要在 reducer 中使用 REMOVE_ITEM 类型的 action。注意，在这个 reducer 中，我们使用了 removeItem 函数，它是由 createActionWithOptimistic 创建的。

const reducer = createOptimisticReducer(initialState, OPTIMISTIC)({
  [removeItem]: (state, action) => ({
    ...state,
    optimistic: action.type === OPTIMISTIC,
    items: state.items.filter(item => item.id !== action.payload),
  }),
});

添加项目到状态中

在添加项目到状态中的时候，我们同样需要使用 createActionWithOptimistic 函数来创建 action。在我们 dispatch 一个 ADD_ITEM action 后，乐观的状态就会发生改变，并且我们将得到一个类型为 OPTIMISTIC 的 action 来通知 store 更新成功。

-- -------------------- ---- -------
----- ------- - ------------------------------------- -------------
  ---------- ------- ------- -- --
    ---------
    ----------- ----------- --- -----------
    ------ -
      ---------------
      -
        --- ---------
        ------------------
      --
    --
  ---
---

示例代码

下面是一个完整的使用 Redux-optimist 的示例代码：

-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------------ ---------- - ---- -----------------
------ - -- -- ------ - ---- -------

----- ------------ - -
  ------ ---
  ----------- ------
--

----- ------- - ------------------------------------- -------------
  ------------- ------- ------- -- --
    ---------
    ----------- ----------- --- -----------
    ------ -
      ---------------
      -
        --- ---------
        ------------------
      --
    --
  ---
  ---------------- ------- ------- -- --
    ---------
    ----------- ----------- --- -----------
    ------ ----------------------- -- ------- --- ----------------
  ---
---

----- ----- - -------------------- --- ---------------------------

----- ------- - ---------------------------------------
----- ---------- - ------------------------------------------

-- --- -- ----
------------------------ ----- ----- -- ----

-- ------ --- ---- -- --
-----------------------------------

总结

Redux-optimist 是一款非常实用的 Redux 插件，通过使用它，我们可以更加快速地处理状态变更。在开发过程中，我们应该使用 createActionWithOptimistic 函数来创建有无乐观状态的 action，从而避免不必要的重复操作。同时，也要注意合理地组合 reducer 函数，并正确地处理各种错误情况。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e31563b0ab45f74a8bc32