redux-saga-thunk 项目教程

redux-saga-thunk 项目教程

redux-saga-thunk Dispatching an action handled by redux-saga returns promise 项目地址: https://gitcode.com/gh_mirrors/re/redux-saga-thunk

1. 项目介绍

redux-saga-thunk 是一个结合了 redux-saga 和 redux-thunk 优点的开源项目。它允许你在使用 redux-saga 处理异步操作时，仍然能够像使用 redux-thunk 那样返回一个 Promise。这使得在迁移代码库时，不需要改变现有的 dispatch 方式，从而简化了从 redux-thunk 到 redux-saga 的过渡。

2. 项目快速启动

安装

首先，你需要通过 npm 安装 redux-saga-thunk：

npm install --save redux-saga-thunk

基本设置

在你的 Redux 配置中，添加 redux-saga-thunk 中间件（在 redux-saga 中间件之前）：

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { middleware as thunkMiddleware } from 'redux-saga-thunk';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  [],
  applyMiddleware(thunkMiddleware, sagaMiddleware)
);

使用示例

在你的请求动作中设置 meta.thunk 为 true，并在 saga 中处理响应动作：

const action = {
  type: 'RESOURCE_REQUEST',
  payload: { id: 'foo' },
  meta: { thunk: true }
};

// 发送动作
store.dispatch(action).then((detail) => {
  console.log('Yaay', detail);
}).catch((e) => {
  console.log('Oops', e);
});

function* saga() {
  while (true) {
    const { payload, meta } = yield take('RESOURCE_REQUEST');
    try {
      const detail = yield call(callApi, payload);
      yield put({ type: 'RESOURCE_SUCCESS', payload: detail, meta });
    } catch (e) {
      yield put({ type: 'RESOURCE_FAILURE', payload: e, error: true, meta });
    }
  }
}

3. 应用案例和最佳实践

服务器端渲染

在使用 redux-saga 进行服务器端渲染时，你可能需要知道何时所有动作都已完成，以便将响应发送给客户端。redux-saga-thunk 提供了一种优雅的方式来处理这种情况。

与 redux-form 结合使用

在 redux-form 中，你需要从 dispatch 中返回一个 Promise，以便 redux-form 知道何时提交完成。redux-saga-thunk 可以无缝地与 redux-form 结合使用。

4. 典型生态项目

redux-saga

redux-saga 是一个用于管理 Redux 应用异步操作的库，它使用 ES6 的 Generator 函数来使异步流程更易于管理和测试。

redux-thunk

redux-thunk 是 Redux 的一个中间件，允许你编写返回函数而不是动作的创建者。它主要用于处理异步操作。

redux-form

redux-form 是一个用于管理表单状态的库，它与 Redux 集成，使表单状态的管理更加简单和可预测。

通过结合使用这些项目，你可以构建一个强大且易于维护的 Redux 应用。

redux-saga-thunk Dispatching an action handled by redux-saga returns promise 项目地址: https://gitcode.com/gh_mirrors/re/redux-saga-thunk