入门

安装

$ npm install redux-saga

或者

$ yarn add redux-saga

或者，您可以直接在 HTML 页面中的 <script> 标签中使用提供的 UMD 构建。请参阅此部分.

使用示例

假设我们有一个 UI，当点击按钮时，它会从远程服务器获取一些用户数据。（为了简洁，我们只展示触发代码的动作。）

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

组件向 Store 分发一个普通对象动作。我们将创建一个 Saga，它会监视所有 USER_FETCH_REQUESTED 动作并触发 API 调用以获取用户数据。

sagas.js

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId)
    yield put({ type: 'USER_FETCH_SUCCEEDED', user: user })
  } catch (e) {
    yield put({ type: 'USER_FETCH_FAILED', message: e.message })
  }
}

/*
  Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.
  Allows concurrent fetches of user.
*/
function* mySaga() {
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser)
}

/*
  Alternatively you may use takeLatest.

  Does not allow concurrent fetches of user. If "USER_FETCH_REQUESTED" gets
  dispatched while a fetch is already pending, that pending fetch is cancelled
  and only the latest one will be run.
*/
function* mySaga() {
  yield takeLatest('USER_FETCH_REQUESTED', fetchUser)
}

export default mySaga

为了运行我们的 Saga，我们需要使用 redux-saga 中间件将其连接到 Redux Store。

main.js

import { configureStore } from '@reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = configureStore({
  reducer, 
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
})

// then run the saga
sagaMiddleware.run(mySaga)

// render the application

在浏览器中使用 UMD 版本

redux-saga 在 dist/ 文件夹中也提供了一个 **UMD** 版本。使用 UMD 版本时，redux-saga 在窗口对象中可用作 ReduxSaga。这使您能够在不使用 ES6 import 语法的情况下创建 Saga 中间件，例如

var sagaMiddleware = ReduxSaga.default()

如果您不使用 Webpack 或 Browserify，UMD 版本非常有用。您可以直接从 unpkg 访问它。

以下版本可用

• https://unpkg.com/redux-saga/dist/redux-saga.umd.js
• https://unpkg.com/redux-saga/dist/redux-saga.umd.min.js

重要！ 如果您要定位的浏览器不支持 *ES2015 生成器*，您必须对其进行转译（例如，使用 babel 插件）并提供有效的运行时，例如 这里提供的运行时。运行时必须在 **redux-saga** 之前导入。

import 'regenerator-runtime/runtime'
// then
import sagaMiddleware from 'redux-saga'