redux-saga | 易学教程

How to pass args from sagaMiddleware to action watcher

阅读更多关于 How to pass args from sagaMiddleware to action watcher

问题 I'm new to Sagas, Use to come from a redux-thunk background, So I'm not sure what is the best way to pass arguments to my final action. I will appreciate some kind of "For dummy answer" The thing is, I have some object called session in my store.js I create this session in the sagaMiddleware, but in order to make my functions in the sagas work, I always need to interact with this object. So, the question is. Using my current code, how is possible to pass some args (In this case "session" to

redux-saga cannot catch actions dispatched by store enhancers

阅读更多关于 redux-saga cannot catch actions dispatched by store enhancers

问题 I need to use store enhancer (reactReduxFirebase from react-redux-firebase) in my redux app. This enhancer dispatches an action, it looks more or less like this (much simplified): const reactReduxFirebase = (next) => { return (reducer, initialState, middleware) => { const store = next(reducer, initialState, middleware); store.dispatch({ type: 'DUMMY_ACTION' }); return store; } } // usage const sagaMiddleware = createSagaMiddleware(); const middleware = [sagaMiddleware]; const store =

Redux sagas Fetch only once when same id is dispatched multiple times

阅读更多关于 Redux sagas Fetch only once when same id is dispatched multiple times

问题 I’m getting a user from my API and store it in my state so I don’t have to fetch it again. Problem is that multiple components requests the user at the same time resulting in multiple concurrent fetch requests. Is there a good pattern to avoid this? This is my saga function* watchUserRequests() { yield takeEvery(actionTypes.USER_REQUESTED, userRequested); } function* userRequested(action) { const {id} = action.payload; let user = yield select(state => state.users.all[id]); // cancel if user

Unable to export generator functions

阅读更多关于 Unable to export generator functions

问题 When attempting to export a generator function in order to use in a Redux-Saga, ES-Lint is telling me that I have an error in my code: [eslint] Expected a function declaration. (func-style) It exports just fine the way that it is currently, and the rule is currently being ignored: /*eslint-disable func-style*/ const myExampleSaga = function* () { yield takeEvery('DO_SOMETHING_REQUEST', andDoThisFunc); }; export default myExampleSaga; I am more or less okay with the fact that ES-Lint does not

How do I make ES6 generators wait for promises, like in redux-saga?

阅读更多关于 How do I make ES6 generators wait for promises, like in redux-saga?

问题 I've read that generators don't wait for promises. How come this is not the case with generators in redux-saga , and how do I make my own generators wait? For example, this saga: takeLatest('FETCH_USER_REQUESTED', function*() { const fetchPromise = yield put(fetchUser()); const user = yield fetchPromise; console.log(user) yield 1 console.log(1) }) will output: Promise Object // <= user data fetched asynchronously 1 instead of: Promise undefined 1 回答1: How come this is not the case with

how to setstate after saga async request

阅读更多关于 how to setstate after saga async request

问题 I'm using redux-saga in my project. I used redux-thunk before, so i can't setState ends of some async request. like this.props.thunkAsync() .then(){ this.setState({ '' }); } Since thunk returns promise, i could use 'then'. But i can't do this with saga, because saga doesn't return promise. So i did it in componentWillReceiveProps by checking flag props (like REQUEST_SUCCESS,REQUEST_WAITING...) has been changed. I think it's not good way to solve this problem. So.. My question is how can i do

how to `bindActionCreators` with redux-thunk

阅读更多关于 how to `bindActionCreators` with redux-thunk

问题 I am quite new to JavaScript and react-native and I have existing project that I need to add functionality to. It is using redux and redux-thunk with redux-saga to send API requests. Currently it supports only 1 dispatch function per component and I need to dispatch several types of requests to the saga. I am trying to bindActionCreators to add the dispatch to the stores but to no avail.. I am totally lost on the mapDispatchToProps part and how do I "fire the action" afterwards.. in single

Listening for a redux action

阅读更多关于 Listening for a redux action

问题 I want to create a reusable redux table module, which will store and update page number, total pages displayed etc, which I can share between all my pages. However I need the update actions to trigger a refreshdata action which will be hitting a different endpoint depending on page. So maybe something along the lines of a page specific listen for the 'RefreshData' action then trigger another action. What would be the best way of acheiving this? I am currently using redux-thunk for my

React store.getState is not a function

阅读更多关于 React store.getState is not a function

问题 Here is my code: store.js import {createStore, applyMiddleware, compose} from 'redux'; import {fromJS} from 'immutable'; import {routerMiddleware} from 'react-router-redux'; import createSagaMiddleware from 'redux-saga'; import createReducer from './reducers'; const sagaMiddleware = createSagaMiddleware(); export default function configureStore(initialState = {}, history) { // Create the store with two middlewares // 1. sagaMiddleware: Makes redux-sagas work // 2. routerMiddleware: Syncs the

Unable to export generator functions

阅读更多关于 Unable to export generator functions

When attempting to export a generator function in order to use in a Redux-Saga, ES-Lint is telling me that I have an error in my code: [eslint] Expected a function declaration. (func-style) It exports just fine the way that it is currently, and the rule is currently being ignored: /*eslint-disable func-style*/ const myExampleSaga = function* () { yield takeEvery('DO_SOMETHING_REQUEST', andDoThisFunc); }; export default myExampleSaga; I am more or less okay with the fact that ES-Lint does not support generators (or at least it would seem that way), however I would like to know why the following