redux-saga

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 exists if (user) return; user = yield call(userApi.get, id); yield put(userActions.userLoaded(id, banner

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 How come this is not the case with generators in redux-saga, and how do I make my own generators wait? This very popular belief, however generators

I'm writing some generic Todo-List component, with the following features Pagination / Sorting Keep a part of the state within the URL (page, sort) Fetching the Data asynchronously using HTTP Requests (using redux-saga) Now I'm trying to find a pattern for the "best" sequence of redux actions to get this working without problems. I want the following behavior: When Todo Component loads: Read URL Query Parameters and use this to fetch the data. When the user clicks sort by name (or next page or filer by xyz ) the Query Parameters within the URL should be updated and the next data should be

I have a question about react-router: for example, I want to redirect from Create form to Edit form after called to create api (using redux-saga) successfully. How should I use react-router in this case? If you include also react-router-redux you can simply treat the page change as another redux action to call from saga (using the new push API). Something like... yield put(push('your/route')) 来源： https://stackoverflow.com/questions/45878719/using-redux-saga-with-react-router

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 dispatch to props, I did this: let sdtp = (arg) => { return (dispatch) => { dispatch({ type: 'GET_TEST

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 middleware, but have been looking towards redux-saga. What is the best way to achieve this? ** To clarify ** I

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 location/URL path to the state const middlewares = [sagaMiddleware, routerMiddleware(history)]; const

I would like to redirect to a new page after successful login. The routes (V4) are used like this: import { browserHistory } from '....browser_history_signleton'; ... class App extends Component { render() { const { authentication: { isSignedIn } } = this.props; return ( <ConnectedRouter history={browserHistory}> <div> <Header/> <Route exact path="/" component={Home}/> <PrivateRoute isAuthorized={isSignedIn} path="/page1" component={PageOne}/> <PrivateRoute isAuthorized={isSignedIn} path="/page2" component={PageTwo}/> </div> </ConnectedRouter> ); } } The saga looks like: import {

Backgrond: I am creating a Login component. saga.js is composed by 3 functions 1. rootSaga . It will execute the list of sagas inside 2. watchSubmitBtn . It will watch the click on the submit button and dispatch an action. 3. shootApiTokenAuth will receive dispatched action and process axios.post the return value is promise object In action: Backend returns 400 to the React . This case no problem I can read the payload and display in the render() easily. But when 200 is returned. I need to let user go to the url /companies . Attempt: I had tried put this.props.history.push('/companies'); in