redux-saga | 易学教程

How to handle errors in fetch() responses with Redux-Saga?

阅读更多关于 How to handle errors in fetch() responses with Redux-Saga?

问题 I try to handle Unauthorized error from server using redux-saga. This is my saga: function* logIn(action) { try { const user = yield call(Api.logIn, action); yield put({type: types.LOG_IN_SUCCEEDED, user}); } catch (error) { yield put({type: types.LOG_IN_FAILED, error}); } } I fetch data like this: fetchUser(action) { const {username, password} = action.user; const body = {username, password}; return fetch(LOGIN_URL, { method, headers: { 'Accept': 'application/json', 'Content-Type':

How to write a Redux Saga Test by mocking selectors and / or redux store

阅读更多关于 How to write a Redux Saga Test by mocking selectors and / or redux store

问题 Context: I'm brand new to writing Redux Saga tests and have been using the React Boilerplate to develop an app, which uses Jest for testing. The boilerplate is extremely modular and complex and I am having trouble figuring out how to even begin writing a test to mock selectors and state for my Saga to use within the test. In the Saga, I'm using Reselect (within the './selectors' file) to grab the 'Username' and "Password' from the reducer, assign them to a constant using yield select , and

聊一聊 redux 异步流之 redux-saga

阅读更多关于聊一聊 redux 异步流之 redux-saga

让我惊讶的是， redux-saga 的作者竟然是一名金融出身的在一家房地产公司工作的员工（让我想到了阮老师。。。），但是他对写代码有着非常浓厚的热忱，喜欢学习和挑战新的事物，并探索新的想法。恩，牛逼的人不需要解释。 1. 介绍对于从来没有听说过 redux-saga 的人，作者会如何描述它呢？ It is a Redux middleware for handling side effects . —— Yassine Elouafi 这里包含了两个信息：首先， redux-saga 是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。其次，我们都知道，在 reducers 中的所有操作都是同步的并且是纯粹的，即 reducer 都是纯函数，纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程中不会对外部产生副作用，即给它传什么，就吐出什么。但是在实际的应用开发中，我们希望做一些异步的（如Ajax请求）且不纯粹的操作（如改变外部的状态），这些在函数式编程范式中被称为“副作用”。 Redux 的作者将这些副作用的处理通过提供中间件的方式让开发者自行选择进行实现。 redux-saga 就是用来处理上述副作用（异步任务）的一个中间件。它是一个接收事件，并可能触发新事件的过程管理者，为你的应用管理复杂的流程。 2. 先说一说 redux

in React Accessing a state via this.props returns function instead of state object

阅读更多关于 in React Accessing a state via this.props returns function instead of state object

问题 Scenario: I have two components, <Homepage> [self explanatory name] and <Country> [which shows a list of country accessed through an API]. <Homepage> imports <Country /> [Country is the child] I dispatch an action to get list of country in . everything works fine, state gets updated as required. Also I'm using mapStateToProps and mapDispatchToProps . Below is the code for <Country /> import React, { Component } from 'react'; import { connect } from 'react-redux'; import { userActions } from '

How to use yield inside map for React Native

阅读更多关于 How to use yield inside map for React Native

问题 My goal is to execute the forked function inside map . Here's what I've tried: function* doSomethingWithItem(item) {} yield all(items.map(item => { // ... some item checking return fork(doSomethingWithItem, item); })); Tried also using yield fork() but got an error "yield is a reserved word..." doSomethingWithItem() isn't called. Appreciate the help. 回答1: Since map uses lambda functions, you can't actually yield something from there directly. yield all is a correct approach, but instead of

conditional async actions in componentDidMount lifecycle method keeps going on a loop

阅读更多关于 conditional async actions in componentDidMount lifecycle method keeps going on a loop

问题 I am working on a react app using redux and sagas connected to an API. There's a form component that has two dropdown fields: a Program and a Contact field. The way the form is designed to work is, when the user selects a program, the form uses the programId to fetch all the contacts that have registered for that program. These contacts are then populated as the options for the contact dropdown field. This works and I've implemented it using the componentWillReceiveProps, like this:-

Redux Saga: How to wait for spawn and call to complete without blocking parent call

阅读更多关于 Redux Saga: How to wait for spawn and call to complete without blocking parent call

问题 I'm trying to add a redux saga function but I can't get the chaining right const randomDelay = () => parseInt(Math.random() * 500) const a = function*() { yield spawn(b) yield call(c) } const b = function*() { yield delay(randomDelay()) } const c = function*() { yield delay(randomDelay()) } const d = function*() {} I want to call a which will spawn b and call c . When c is complete I want a to become unblocked and complete. When b and c both complete I want to call d From what I can tell

Redux Saga stopped by LOCATION_CHANGE too early

阅读更多关于 Redux Saga stopped by LOCATION_CHANGE too early

问题 So I'm injecting Sagas dynamically when the route loads path: '/home', name: 'home', getComponent(nextState, cb) { require.ensure([], require => { let HomePageReducer = require('./containers/HomePage/reducer').default; let HomePageSagas = require('./containers/HomePage/sagas').default; let HomePage = require('./containers/HomePage').default; injectReducer('home', HomePageReducer); injectSagas(HomePageSagas); cb(null, HomePage); }) }, injectAsyncSagas goes like this: export function

How do I create a leading debounce with redux-saga

阅读更多关于 How do I create a leading debounce with redux-saga

问题 Is there a way to do a leading debounce? The example on the recipes only shows a trailing debounce. So below is trailing debounce example where we delay the logic fro 500ms: import { call, cancel, fork, take, delay } from 'redux-saga/effects' function* handleInput(input) { // debounce by 500ms yield delay(500) ... } function* watchInput() { let task while (true) { const { input } = yield take('INPUT_CHANGED') if (task) { yield cancel(task) } task = yield fork(handleInput, input) } } where as

How do I create a leading debounce with redux-saga

阅读更多关于 How do I create a leading debounce with redux-saga