I try to handle Unauthorized error from server using redux-saga. This is my saga: I fetch data like this: But anyway result is {type: ‘LOG_IN_SUCCEEDED’, user: undefined} when I expect {type: ‘LOG_IN_FAILED’, error: ‘Unauthorized’}. Where is my mistake? How to handle errors right using Redux-Saga? Answer Don’t handle the then and error in your fetchUser method and your saga. Since
Tag: redux
ESLint ES6 Redux global-required Unexpected require();
I have this problem with ESLint and can’t soulve on my own, those stores are separated for each enviroement as you can see on the screenshot, how could I fix that to make ESLint happy and I to learn a new thing? Answer It’s because you’re requiring in branched code: http://eslint.org/docs/rules/global-require. If you don’t want to change your code, just
Getting Redux DevTools To Work
I followed the tutorial, however, am getting the console error: “Error : Expected the reducer to be a function” Here is my ( relevant ) configuration: WEBPACK.CONFIG.JS: INDEX.JS: CONFIGURESTORE.JS: CONFIGURESTORE.DEV.JS: Im not clear on what I am doing wrong. Thanks Answer Having a redux dev tools log monitor over my page was a little bit frustrating. So I found an
Accessing Redux Store from routes set up via React Router
I would like to make use of react-router’s onEnter handler in order to prompt users to authenticate when entering a restricted route. So far my routes.js file looks something like this: Ideally, I’d like my requireAuth function to be a redux action that has access to the store and current state, that works like this: store.dispatch(requireAuth()). Unfortunately I don’t have
How to update single value inside specific array item in redux
I have an issue where re-rendering of state causes ui issues and was suggested to only update specific value inside my reducer to reduce amount of re-rendering on a page. this is example of my state and I am currently updating it like this where action.payload is a whole array containing new values. But now I actually just need to
Passing multiple actions to onClick event in a react-bootstrap Button
Consider a react/redux application with react-bootstrap components. This may be a very rookie question, but I am trying to pass multiple actions to a single onClick event on a Button from a react-bootstrap library. How to do this properly? Answer Wrap them in another function:
How to dispatch a Redux action with a timeout?
I have an action that updates the notification state of my application. Usually, this notification will be an error or info of some sort. I need to then dispatch another action after 5 seconds that will return the notification state to the initial one, so no notification. The main reason behind this is to provide functionality where notifications disappear automatically
React-Redux: Should all component states be kept in Redux Store
Say I have a simple toggle: When I click the button, the Color component changes between red and blue I might achieve this result by doing something like this. index.js container.js action_creator.js reducer.js but this is a hell of a lot of code to write for something that I could have achieved in 5 seconds with jQuery, some classes, and
Where to write to localStorage in a Redux app?
I want to persist some parts of my state tree to the localStorage. What is the appropriate place to do so? Reducer or action? Answer Reducer is never an appropriate place to do this because reducers should be pure and have no side effects. I would recommend just doing it in a subscriber: Before creating the store, read those persisted
Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions. Before I wrap my head around it, I would like to know the pros/cons of using redux-saga instead of the approach below where I’m using redux-thunk with async/await. A component might look like this, dispatch actions