redux-saga | 易学教程

How to fetch data over multiple pages?

阅读更多关于 How to fetch data over multiple pages?

问题 My project is based on React, redux, redux-saga, es6 and I try to fetch data from this API: http://api.dhsprogram.com/rest/dhs/data/BD,2000,2004,2007?&returnFields=CharacteristicLabel,Indicator,IndicatorId,Value&f=json As you can see, this specific API call shows data with a limit of 100 data per page spread on 40 pages. According to this answer: http://userforum.dhsprogram.com/index.php?t=msg&th=2086&goto=9591&S=Google it says that you can extend the limit to a maximum of 3000data per page.

redux-saga: How to create multiple calls/side-effects programmatically for yield?

阅读更多关于 redux-saga: How to create multiple calls/side-effects programmatically for yield?

问题 With redux-saga, one can execute multiple effects in parallel: import { call } from 'redux-saga/effects' // correct, effects will get executed in parallel const [users, repos] = yield [ call(fetch, '/users'), call(fetch, '/repos') ] How can i create those "call"-calls programmatically ? What i want to achieve is this: Lets say i have an array with different parameters and i want to execute a request to a server per parameter, but in parallel with redux-saga: const parameters = ['abc', 'def',

How to implement jszip in react.js

阅读更多关于 How to implement jszip in react.js

问题 I am trying to zip a list of files before sending out through the http request. But I got stuck here. export default function zipTargetFiles(files) { if (files.length <= 1) { return files; } else { const zip = require('jszip')(); for (let i = 0; i < files.length; i++) { zip.file(files[i].name, files[i]); } return zip.generateAsync({type:"blob"}); } } Basically, the function takes in a list of files and tries to zip them into one single .zip file. But when i send it out as formed data, it gave

How to implement jszip in react.js

阅读更多关于 How to implement jszip in react.js

React/redux app renders blank screen on Safari

阅读更多关于 React/redux app renders blank screen on Safari

问题 I built an app in React/redux that works in every browser I tried, BUT Safari on MacOS and any browser on iPhone. I get no error, no console message, nothing that would give me some idea. It only renders tag in Safari and the screen is blank. http://podcast.exploration.io Do you have any idea how could I trace this issue? Thanks 回答1: I found the issue. The main reason why it failed was 'fetch' function...which is not available in Safari. I'm not sure why it wouldn't print anything, but I

React hooks: dispatch action from useEffect

阅读更多关于 React hooks: dispatch action from useEffect

问题 My folder structure: |--App |--Components |--PageA.js |--PageB.js |--PageC.js |--common-effects |--useFetching.js I am refactoring my code to fetch data from API, using react hooks. I want to dispatch an action from useEffect in useFetching.js that is intercepted by saga middleware. The action should be dispatched only when the components( PageA , PageB , PageC ) mount. I am using redux , react-redux and redux-saga . PageA.js : function(props) { useFetching(actionParams) //....// } Similar

redux-saga - import and combine sagas from node_modules with other sagas

阅读更多关于 redux-saga - import and combine sagas from node_modules with other sagas

问题 Is there any way to combine sagas from node_modules with other sagas i wrote for my app? It would make sense if sagaMiddleware.run() would accept array of sagas, but id doesn't I have npm module in node_modules which has this saga. // node_modules/module/rootSaga.js import { takeLatest } from 'redux-saga/effects' import { createUserSaga } from './sagas/usersSagas' export default function* usersModuleMernSagas() { yield takeLatest('CREATE_USER_REQUEST', createUserSaga) } My store look like

react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

阅读更多关于 react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

react全家桶从0到1(最新) 本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。从webpack开始思考一下webpack到底做了什么事情？其实简单来说，就是从入口文件开始，不断寻找依赖，同时为了解析各种不同的文件加载相应的loader，最后生成我们希望的类型的目标文件。这个过程就像是在一个迷宫里寻宝，我们从入口进入，同时我们也会不断的接收到下一处宝藏的提示信息，我们对信息进行解码，而解码的时候可能需要一些工具，比如说钥匙，而loader就像是这样的钥匙，然后得到我们可以识别的内容。回到我们的项目，首先进行项目的初始化，分别执行如下命令 mkdir react-demo // 新建项目文件夹 cd react-demo // cd到项目目录下 npm init // npm初始化引入webpack npm i webpack --save touch webpack.config.js 对webpack进行简单配置，更新webpack.config.js const path = require('path'); module

How to handle multiple interdependent sagas when rendering server-side?

阅读更多关于 How to handle multiple interdependent sagas when rendering server-side?

问题 I am implementing server-side rendering using redux-saga. I am following the "real world" example provided in the redux-saga repository. node.js entry-point uses react.js renderToString to render the application. rendering the application triggers componentWillMount , which dispatches actions GET_GEOLOCATION and GET_DATE . These async actions will resolve with SET_GEOLOCATION and SET_DATE . renderToString finishes rendering the application; END action terminates the saga listeners The problem

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':