This is more of an understanding question and I also want to know the community thoughts, rather than a code question.
We have a React App using redux for managing the global store and redux-thunk for dispatching actions. Now we want to localize the App and add a language switch. For that purpose I created a HOC which uses React.Context to store the dictionary for current language in it. And I wrapped all Components in this HOC - everything works just fine.
But we also need to access to the dictionary in the thunks to e.g. provide success/error messages after API calls in the selected language. It seems to be impossible without passing dictionary into thunks.
I've read a lot about Context API and when to use it and that it has different purpose than Redux. That's why I put the translations in the Context and not in the store, mainly for this reason. But now I'm getting the feeling that I missed something and should actually put the translations in the store instead to not be forced to pass the dictionary to the thunk every time I need it there. Is it so?
Or is there a way to implement something like getContext similar to getState from redux-thunk?
Related
Where should I put get user data API call which is requesting user data such as username, email from JWT token stored in localstorage.
Should I call it from _app.js pass it to the components or should I create redux store and save these data.
Using redux only for that purpose is an overkill. You should create context and wrap components, which are using this data. Also there is hook called useReducer, combined with context API allows you to achieve redux behavior.
Passing user data down to components directly is not a bad idea if you have only 2 level depth structure which is often not the case.
For this purposes is a nice option to use tools like Redux or React Context API. That way you can access the global state from whichever component you like in the same way, which leads to more readable and maintainable code. For more information about Redux vs Context API, consider looking more in-depth to understand the differences and decide which one is more suitable for your case.
For me personally, the Context API can do the work in more of the cases which is fine. Also, it is already part of React, and it's not a dependency like Redux is.
Suppose on the same page,
I have two instances of the same component. Both of them call the same dispatch except with different parameters and thus effect each other.
Is there any way to fix this other than get rid of redux?
Thank you
The very purpose of Redux is single shared piece of state(with high control over changes through action/reducer, middleware to improve flexibility, performance-related wrappers etc - but that is just additions)
If you really want component to have independent data, you should not use Redux, but integrate local state with useState or useReducer(or this.state if for any reason you use class components). By the way, useReducer utilizes the same concept of reducer/action but since it does not have concept of middleware I'd suggest consider useState first, before trying to integrate somehow existing Redux actions with useReducer
That does not look really probable to me, but in case you want to reuse the same logic to those components as well as to Redux actions (say, same endpoint, the same logic to process response) you can extract some logic into separate function so both Redux action creator and those components would take benefit of reusing it
So most of my projects are simple enough that Redux has been total overkill (even though it's worked really well always) - I am going to use Context API on a new project (it will easily do the job, and it's way easier to explain to other devs and get them going on) - Redux has Thunk to handle async actions. I think I understand things well enough to reason that async actions will not be a problem for Context API - Redux Thunk doesn't actually add async functionality to Redux - it simply makes the syntax more palatable. So my reasoning says that Context API will be able to handle any async actions as long as I write code to correctly deal with them. Is this right, or do I need to stick to Redux with Thunk if I want to handle async actions effectively?
I had similar question myself and came across this article that talks about a major difference between Redux and the Context API:
From https://www.academind.com/learn/react/redux-vs-context-api/
The Context API (currently) is not built for high-frequency updates (quote of Sebastian Markbage, React Team), it’s not optimized for that. The react-redux people ran into this problem when they tried to switch to React Context internally in their package.
My personal summary is that new context is ready to be used for low
frequency unlikely updates (like locale/theme). It’s also good to use
it in the same way as old context was used. I.e. for static values and
then propagate updates through subscriptions. It’s not ready to be
used as a replacement for all Flux-like state propagation. ---
Sebastian Markbage
So for the moment, it seems like you might want to look into using React Context for low-frequency updates (e.g. theme changes, user authentication) but not use it for the general state management of your application.
Hope this helps.
I am actually new in redux, I started to discover it and understand its logic. I have a question in my mind that, is it possible to make api calls inside of components and pass the responses to store?
Because as I understand we can make API calls by triggering actions with action creators, but can I do make calls in component and when I get results am I able to pass it to reducer and store without using action creators?
How its possible, can someone give me a small example of it, if my question is logical?
So I may be asking the wrong question, so please leave comments and I'll adjust. I was told by another developer that when using redux, I should do ALL API calls within actions and create reducers for them. But I feel that sometimes making the call directly in the component will save me a TON of code. Are there best practices for this sort of thing?
If the data you are getting from the API is only going to be consumed by a single component then you are fine to write it as part of your component (or better still, a container component). I believe the rationale behind doing your API calls in actions is to ensure that the single source of truth is maintained (the main reason to use 'the react/redux way' for me personally). If you are bringing in data from your API that is to be consumed by multiple components then use redux to ensure the same state is maintained by redux and passed to all components that use it.
This was previously answered by Redux's creator, Dan Abramov, here: Why do we need middleware for async flow in Redux? .
The summary:
It’s just inconvenient in a large application because you’ll have different components performing the same actions, you might want to debounce some actions, or keep some local state like auto-incrementing IDs close to action creators, etc. So it is just easier from the maintenance point of view to extract action creators into separate functions.