Introduction to Redux


#1
The happening place to discuss anything relating to the Introduction in Redux tutorial: https://www.kirupa.com/react/introduction_to_redux.htm :slight_smile:

#2

Thank you the much waited redux tutorial. please put demo app to use react, redux and react router all together in one example. How to combine both redux and react router in one react app.
Thanks in advance.


#3

Sounds like a plan! I’ll see what I can do in a future tutorial :slight_smile:


#4

Hi @kirupa!

Thanks very much for this nice explanation of how to use Redux in our application. :slight_smile:

I am working on a React project where I need to deal with the Real-Time Data coming from WebSocket and based on that Data I need to update various components in place accordingly.

So what I think it would be great to centralize my State so that each and every component can access the data. Please let me know if I am thinking correctly, as the first time I am making a real-time application on React and Redux. :slight_smile:

Also, one of my doubt was that how do we place the code which only contains the Business Logics and don’t really return any component. They just contain the logic like Socket.js file which will contain the logic to update the various values based on the Real-Time Data coming from the server. What kind of folder structure should we follow in these situations?

Any help on this or any visual for making a folder structure would be great.


#5

For folder structure, use whatever approach you prefer. If your project is really large, you can break your folders up by components that perform a certain task. You can also arrange them by what part of the UI they represent.

Your thinking about centralizing the state using Redux is spot-on. The kind of component you want is known as a Container component. It’s just a regular component that deals less with visuals and more with some function. Dan Abramov did a good job writing about it here: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

:slight_smile: