Redux-Optimist 项目常见问题解决方案

Redux-Optimist 项目常见问题解决方案

redux-optimist Optimistically apply actions that can be later commited or reverted. 项目地址: https://gitcode.com/gh_mirrors/re/redux-optimist

Redux-Optimist 是一个开源项目，它提供了一个中间件，用于在 Redux 中乐观地应用操作，这些操作可以随后提交或回滚。该项目主要使用 JavaScript 编程语言。

新手常见问题及解决步骤

问题一：如何安装 Redux-Optimist？

问题描述： 新手用户不知道如何将 Redux-Optimist 集成到他们的项目中。

解决步骤：

1. 确保你的项目已经安装了 Redux。
2. 在项目根目录下打开终端。
3. 运行以下命令安装 Redux-Optimist：

   npm install redux-optimist
   

4. 安装完成后，你可以在项目中引入并使用它。

问题二：如何在项目中使用 Redux-Optimist？

问题描述： 用户不知道如何将 Redux-Optimist 与他们的 Redux reducer 集成。

解决步骤：

1. 在你的顶层 reducer 中引入 combineReducers 和 optimist。
2. 使用 combineReducers 将你的 reducer 组合起来。
3. 使用 optimist 函数包装你的 combined reducer。
4. 示例代码如下：

   import { combineReducers } from 'redux';
   import optimist from 'redux-optimist';
   import todos from './reducers/todos';
   import status from './reducers/status';
   
   export default optimist(combineReducers({
     todos,
     status
   }));
   

问题三：如何处理乐观操作的提交和回滚？

问题描述： 用户不清楚如何处理乐观操作的提交（COMMIT）和回滚（REVERT）。

解决步骤：

1. 在你的 action creator 中，为乐观操作分配一个唯一的 transactionID。
2. 当发送乐观操作时，使用 BEGIN 类型并附带 transactionID。
3. 当从服务器收到响应后，发送一个 COMMIT 或 REVERT 类型的操作，并使用相同的 transactionID。
4. 示例代码如下：

   import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
   import request from 'then-request';
   
   let nextTransactionID = 0;
   
   export default function middleware(store) {
     return next => action => {
       if (action.type === 'ADD_TODO') {
         let transactionID = nextTransactionID++;
         next({
           type: 'ADD_TODO',
           text: action.text,
           optimist: { type: BEGIN, id: transactionID }
         });
         request('POST', '/add_todo', { text: action.text })
           .getBody()
           .then(response => {
             next({
               type: 'ADD_TODO_COMPLETE',
               text: action.text,
               response: response,
               optimist: { type: COMMIT, id: transactionID }
             });
           })
           .catch(err => {
             next({
               type: 'ADD_TODO_FAILED',
               text: action.text,
               error: err,
               optimist: { type: REVERT, id: transactionID }
             });
           });
       } else {
         return next(action);
       }
     };
   }
   

redux-optimist Optimistically apply actions that can be later commited or reverted. 项目地址: https://gitcode.com/gh_mirrors/re/redux-optimist