redux-saga

入門

安裝

$ npm install --save redux-saga

$ yarn add redux-saga

使用範例

classUserComponentextendsReact.Component{  ...onSomeButtonClicked(){const{ userId, dispatch}=this.propsdispatch({type:'USER_FETCH_REQUESTED',payload:{userId}})}  ...}

sagas.js

import{call,put,takeEvery,takeLatest}from'redux-saga/effects'importApifrom'...'// 工作的 Saga：當 action 是 USER_FETCH_REQUESTED 時被觸發function*fetchUser(action){try{constuser=yieldcall(Api.fetchUser,action.payload.userId);yieldput({type:"USER_FETCH_SUCCEEDED",user:user});}catch(e){yieldput({type:"USER_FETCH_FAILED",message:e.message});}}/*  在每次 dispatch `USER_FETCH_REQUESTED` action 時，啟動 fetchUser。  允許同時取得使用者。*/function*mySaga(){yieldtakeEvery("USER_FETCH_REQUESTED",fetchUser);}/*  另外你也可以使用 takeLatest。  但不允許同時取得使用者。當一個 fetch 已經在 pending 時，如果取得 dispatch「USER_FETCH_REQUESTED」，  正在等待的 fetch 會被取消，只執行最新的發出的 USER_FETCH_REQUESTED。*/function*mySaga(){yieldtakeLatest("USER_FETCH_REQUESTED",fetchUser);}exportdefaultmySaga;

main.js

import{createStore,applyMiddleware}from'redux'importcreateSagaMiddlewarefrom'redux-saga'importreducerfrom'./reducers'importmySagafrom'./sagas'// 建立 saga middlewareconstsagaMiddleware=createSagaMiddleware()// 將 saga middleware mount 在 Store 上conststore=createStore(reducer,applyMiddleware(sagaMiddleware))// 然後執行 sagasagaMiddleware.run(mySaga)// render 應用程式

文件

Translation

在瀏覽器使用 umd build 版本

import'regenerator-runtime/runtime'// 接著importsagaMiddlewarefrom'redux-saga'

從原始碼中來建立範例

$ git clone https://github.com/redux-saga/redux-saga.git$cd redux-saga$ npm install$ npmtest

Counter 範例

counter-vanilla

counter

$ npm run counter# generators 的測試 sample$ npm run test-counter

cancellable-counter

$ npm run cancellable-counter

Shopping Cart 範例

$ npm run shop# generators 的測試 sample$ npm run test-shop

async 範例

$ npm run async# generators 的測試 sample$ npm run test-async

real-world 範例（使用 webpack 和 hot reloading）

$ npm run real-world# 抱歉，還沒有測試。

TypeScript

Logo

Backers

Sponsors