redux-saga

redux-sage和redux-thunk类似都是redux的中间件，都用于处理异步操作。redux-saga使用ES6的Generator功能，避免了redux-thunk的回调写法，并且便于测试。 下面展示了最简单是使用示例 import { call, put, takeEvery, takeLatest } from 'redux-saga/effects' import Api from '...' // worker Saga : 将在 USER_FETCH_REQUESTED action 被 dispatch 时调用 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}); } } /* 在每个 `USER_FETCH_REQUESTED` action 被 dispatch 时调用 fetchUser 允许并发（译注：即同时处理多个相同的 action） */

The user can logout himself when he/she clicks on the logout button but if the token is expired he/she cant logout because in my application, the token is used in both server side and front end. When user clicks on the logout button, the token from both server and browser is cleared if token is valid. There is a chance that when user does not log out and his/her token expires but is not being cleared in the browser. For addressing this situation, how do i check for token expiration every time the user visits in my app so if the token is expired, clear the token from the browser? I tried in

I have a store with a list of items. When my app first loads, I need to deserialize the items, as in create some in-memory objects based on the items. The items are stored in my redux store and handled by an itemsReducer . I'm trying to use redux-saga to handle the deserialization, as a side effect. On first page load, I dispatch an action: dispatch( deserializeItems() ); My saga is set up simply: function* deserialize( action ) { // How to getState here?? yield put({ type: 'DESERISLIZE_COMPLETE' }); } function* mySaga() { yield* takeEvery( 'DESERIALIZE', deserialize ); } In my deserialize

介绍 在redux中更好的解决异步操作 redux-saga相当于在redux原来的数据流中多了一层,对action进行监听 接收到action时,派发一个任务维护state saga通过Generator方式创建,异步方法同步化 正常redux流程 加入redux-saga之后的流程 使用方式 import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' //引入saga文件 import { rootSaga } from './rootSaga' //使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。 //运行 rootSaga 之前，我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 const sagaMiddleware = createSagaMiddleware(); const middlewares = [ sagaMiddleware ]; const store = createStore(rootReducer, applyMiddleware(...middlewares));

I'm logging banner impressions when it is visible on screen. When a user scrolls, the same banner can be made visible multiple times in short time period. And I'd like to prevent that. On first thought, throttle is perfect way of preventing it. But then when you have multiple banners in one page, throttle would not log the 2nd banner in screen if throttled. So how can I throttle per key? (banner id as a key in this example) ie, I want to throttle banner impression per banner_id. (it's like servers throttling api_endpoint access per api keys) EDIT One could think of creating throttle for each

Because "yield"-statement isn't allowed within a callback, how can i use the "put" feature of redux-saga within a callback? I'd like to have the following callback: function onDownloadFileProgress(progress) { yield put({type: ACTIONS.S_PROGRESS, progress}) } This isn't working and ends up in "unexpected token", because yield is not allowed in a plain function. Otherwise i can't pass a callback as a " function * ", that would allow yield. ES6 seems broken here. I've read that redux-saga provides some features called " channels ", but to be honest, i didn't get it. I've read several times about

On RxJS - Goals I read that their goal is better debuggability: Goals Provide more debuggable call stacks than preceding versions of RxJS I have just started to use redux-observable which is quite easier for me to understand comparing it to redux-saga as I am already used to the reactive style with lodash and ramda (ok, fp style maybe ;). I was surprised that it's not possible to debug it yet. Is it true? If so, then I gotta switch to redux-saga s maybe or stick with redux-thunk . Edit based on Jay Phelps's answer By debugging I meant: "How to set a breakpoint on e.g. observable.map(...) in a

The docs say fork is an attached fork and spawn is a detached fork - how do they differ? Alex One way to look at it is to see your saga's as a Graph. 'fork' creates a child from the calling process. While 'spawn' creates a new child at the root of the graph. So when you 'fork' another process, the parent process will wait until the 'forked' process is finished. Also every exception will bubble up from the child to the parent and can be caught in the parent. A 'spawned' process though will not block the parent, so the next 'yield' statement is called immediately. Also the parent process will

Goal : when loading a react-router route, dispatch a Redux action requesting asynchronic Saga worker to fetch data for the underlying stateless component of that route. Problem : stateless components are mere functions and don't have lifecycle methods, such as componentDidMount, so I can't(?) dispatch Redux action from inside the function. My question is partly related to Converting stateful React component to stateless functional component: How to implement "componentDidMount" kind of functionality? , but my goal is to merely dispatch a single Redux action requesting data to be populated to