DEV Community

Revisiting Redux with Context and Hooks

Brendan B on April 29, 2019

I develop a small, internal facing UI, and it's been using Redux for awhile now. The store provides functionality for certain global concerns lik...
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
visarts profile image
Brendan B

Do you have any public code I could look at? It's hard to tell exactly without seeing the context :)

Collapse
 
trickydisco78 profile image
trickydisco78

Got it working now. I took out params = {} thinking it wasn't required

Thread Thread
 
visarts profile image
Brendan B

That's great! Glad it worked

Collapse
 
jsina profile image
Sina Maleki

Thanks about your articles, do have a repo for this article?

Collapse
 
visarts profile image
Brendan B

I never made one, sorry! I may one day and if I do I'll post it here, but I'm more likely to write an update to this that's a little less heavy handed with context, I'll have a repo with that one if I do.

Collapse
 
nielsdom profile image
Niels

Thanks for the article. It seems really a pain to implement redux... You have any repo with best practices architecture redux/hooks to recommend ? a simple one if possible, thanks :)

Collapse
 
visarts profile image
Brendan B

I don't have a public one, yet! But I'll post something here when I get to working on a big refactor of a public project I have. I've learned a few things since I wrote this and think there are some cleaner ways to do stuff, especially around actions. I do agree that redux is a lot of implementation detail, and while this article cuts down on some of that it's still a lot of boilerplate that I'd like to reduce, without putting a lot of work on the consuming component.

Collapse
 
nielsdom profile image
Niels • Edited

Thanks, looking forward for a repo :D

By the way, I tried this redux dev tools package to trace hooks activity, really cool: github.com/troch/reinspect

Thread Thread
 
trickydisco78 profile image
trickydisco78

i couldn't seem to get this to work. Where did you add it? I tried around the main app or storecontext but it didn't show that it updated state in the devtools

Collapse
 
aceabdel profile image
aceAbdel

hit there is any way to access the state tree in the actions?
like store.getState() ?

Collapse
 
visarts profile image
Brendan B

Sorry for the late reply. One way would be in the 'getRootActions' method in the StoreProvider component, to pass another parameter after dispatch, 'state', and then pass that into bindDispatchToActions to be available to any of the actions it iterates over. It's kind of clunky, but quite honestly this whole approach here is a bit heavy. I think I might, especially for a smaller app, just leave actions context out entirely, export some basic action functions from a file and just import those anywhere they're needed, passing in dispatch at point of use.

Collapse
 
trickydisco78 profile image
trickydisco78

Using this architecture does it mean that any changes to the store will cause re-renders to all the components even if they aren't interested in a piece of state?

Collapse
 
visarts profile image
Brendan B

I tested this out on a project I used to work on and didn't see re-renders, although it may depend on the implementation - I believe (although I could be wrong) that the way context works here in conjunction with the reducer hook means that state changes don't cause re-renders in anything but the components using that piece of state.