We are using react-connected-router, and in our react page components, we fetch state from the server, and dispatch actions to update the Redux state (we are just using hooks, no thunks nor saga middleware).
However, when we use the redux devtools for time travel debugging, the component will dispatch actions again when we rewind to the corresponding state...
I don't want to dispatch new actions when doing time travel debugging.
To be honest, I never want to do anything but rendering in my components, I typically do async fetches in event handlers (like click), but this approach doesn't work with React Router. Ideally when the browser history is changed by the user, some event should be fired, and async fetches should be done by handling that event, and not when rendering the page component, but I can't find documentation of how to do that.
My general question is, how does one write code that plays nicely with the devtools time travel debugger, so that new actions are not dispatched when just replaying state?
As far as I understand, middleware like Redux thunk or saga doesn't solve this problem either, unless the devtools would completely ignore Redux thunks being dispatched when doing time travel debugging. Maybe this is already the case, and I should just use these middlewares
It seems the Redux devtools have an option to lock new actions from being dispatched!
It is explained in this blog
So the guidelines seem to be to just fire these actions, and have the developer manually lock the changes.
I'm not 100% happy with this, it just feels wrong to dispatch actions as a side effect during component rendering, but so be it.
Related
I am learnig react and react redux, I just want to know that, suppose I have sign in page, there onSubmit we dispatch action SIGN_IN (of redux) , on action then we dispatch SIGNIN_SUCCESS and SIGNIN_FAILURE. So I just want to know that insted of handling SIGNIN_SUCCESS and SIGNIN_FAILURE on actions, can I handle it on submit handler function of Components.
So In this way I don't need redux think middleware, And there will be only sync actions.
Is this a good approch?
It's possible, but I can think of some disadvantages for this approach:
Separation of concerns, or the general intended structure of react-redux apps, envisions dealing with async actions outside of components. Async actions can potentially do complex things and it's cleaner to keep this out of components. They don't need to know about the details of handling errors on sign in (for example).
Reusing this event handler would need to be react custom hook (since it uses dispatch), tying it into react for no real reason. Other places in your app might want to dispatch a signIn thunk as well.
Thunks have quick and easy access to getState. If that is needed, it's a bit more cumbersome to do the same in react and a bit weird to use useSelector with the entire state.
Since redux-toolkit is now the recommended way to use redux, the createAsyncThunk it offers makes the typical thunks more concise. You get the pending/fulfilled lifecycle around a promise out-of-the-box. It's probably better to rely on this rather than re-inventing classic thunks in a different way (what you had in mind with sync actions).
I find the context api and useReducer a much nicer way of state management but some people are saying to use redux toolkit so can anyone explain what it is and how it is superior to the aforementioned context api and userReducer hook??
React Context + useReducer is a very simplified version of Redux.
They both can provide a clean action => reducer => update state flow that is held globally in your application. The key difference is Redux comes with a lot more tools that you would have to rewrite if you decided to go the route of Context + useReducer.
The main thing being, popular middleware libraries!
Redux has access to libraries such as redux-saga and redux-thunk that allow you to do asynchronous actions in a clean and manageable way.
Also you miss out on Redux Devtools, a very useful chrome extension for debugging state management in Chrome Devtools.
Basically, it's up to the application's complexity to decide which you use.
I hope this helped a bit.
I am using React with hooks & Redux saga in my react application.
I have created this sandbox to represent the scenario I am interested in.
So I have a page and a redux store, in that page I perform some sort of action that involves the store, while this action is happening, I want to display a loading indication to the user because this action might take some time to finish. so I add another state to the store that turns on when an action is in progress, if that state is on I show a loading indication to the user.
My question what is your method of handling post action logic, for example: lets say that after the action has finished successfully I want to redirect the user to a different page. how would you approach this with redux saga?
We know that if a Redux action triggers an API call to a server (whether in Redux middleware or Redux Thunk), it takes time to receive the answer from the server. During this waiting phase, the UI must somehow shows the user that some loading is being done (showing an Spinner for example). In React and React native, a famous trick to handle these common situations is a isLoading boolean flag in the Redux state and of course, a loading action being dispatched. This boolean will be toggled once the answer is ready to be shown, so that I can update the UI.
However, after applying this trick for years, what I've got is an application full of bugs and errors and a super dirty code with a lot of redundant code.
I have checked all the React life cycle hooks to check the order, in which the hooks are called and the process of Redux dispatching. It seems that Redux and React works totally separately. (I know that getDerivedStateFromProps is called once the store has been updated, but it does not solve my problem)
I need a better way to handle these common situations. I don't know if I need to make modification in Redux part of my application, or in the UI, or ...
I am using Redux in my application. One my page, I have 5 controls which subscribe to the store. But in case of certain specific actions, I do not want 2 controls to respond to the change. How can I handle this situation.
I looked at this link https://github.com/reactjs/redux/issues/580 but I could not find anything like store.getState().lastAction.
What is the best way to handle this scenario?
You should have a flag in your state saying if you should update your control or not. One of the base principle of Redux is to not allow client to know how the store is updated. You should only respond to state changes, whatever has changed the state.
But I don't really understand why you have to handle store changes by hand in react ? You should consider using react-redux.
Edit
As pointed in comments, if you need to do some side effects when dispatching actions, you should use some redux middleware such as redux-thunk, redux-saga, redux-observable, redux-loop. The simplest one for beginner is, I think, redux-thunk. It allows you to dispatch a simple function that will be executed and that will be able to also dispatch other actions.
However, to trigger a side effect for each action and being able to filter by action type, please see redux-tap as indicated in comments by #Brandon.