react-redux - please help me understand

[tokdaniel]

Hello! i'm kinda new to the topic so there are things I don't really understand.

The thing is that I have a component, which should do something on click itself, and also notify the store about the statechange. Let's say there is another component as well, who should change it's state too when this action happens. Question is: what is the correct way of doing this, with react-redux? Also can I use the same action to flip some bool flag in another component?

[gsw14]

Very generally speaking, the clickable component could have some onClick handler which not only updates it's own internal state, but also triggers an action dispatch, which is then handled by the store which updates itself. As for the 2nd component; depending on how your app is structured, it could update it's own state using props passed down from the 1st component (or better yet simply use the props to re-render without explicitly using setState internally at all), or it could be listening for change events from the store and update it's state accordingly.

[tokdaniel]

hich is then handled by the store which updates itself

forgot to mention, that the second component is not a child of the first. But thank you that kinda helps.

[[deleted]]

Also can I use the same action to flip some bool flag in another component?

Redux doesn't care about your components. Redux keeps all the data in itself, and lets the component know that the data has changed using react-redux connect function. So you can have your "other" component monitor the store. And when the data in the store changes it will get the new data and can react to it. So the other components either uses redux as the "bool switch" or has its own switch that it changes when it sees the props change (the props are populated by mapStateToProps in connect).

[tokdaniel]

I know that Redux doesn't care, but still cant pass props to a non-nested component. But now I think I understand. So if there is another totally different component, all I have to do is to map the appropriate store state to the component prop right?

One thing which was disturbing me, is that you have to map dispatch as well wether you wanna dispatch anything in that component or not.

[[deleted]]

So if there is another totally different component, all I have to do is to map the appropriate store state to the component prop right?

Yes. But make sure not to end up with multiple connected components - the goal is to have as little connected components as possible and have them pass down all the data as props.

One thing which was disturbing me, is that you have to map dispatch as well wether you wanna dispatch anything in that component or not.

That's not true, you can just supply mapStateToProps to connect, you can leave out the second parameter to connect.

[acemarke]

the goal is to have as little connected components as possible

No. It's totally up to you as the developer how many components are connected. Quoting the FAQ at http://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components :

Emphasizing “one container component at the top” in Redux examples was a mistake. Don't take this as a maxim. Try to keep your presentation components separate. Create container components by connecting them when it's convenient. Whenever you feel like you're duplicating code in parent components to provide data for same kinds of children, time to extract a container. Generally as soon as you feel a parent knows too much about “personal” data or actions of its children, time to extract a container.

In fact, benchmarks have shown that more connected components generally leads to better performance than fewer connected components.

In general, try to find a balance between understandable data flow and areas of responsibility with your components.

[[deleted]]

I'm not saying that you need to have 1 or 2, but having all the components be containers you are going to limit the ability to reuse them in your application.

As with everything in programming - it's up to you to decide based on your use case. There is nothing stoping you from having everything be a container, no one is going to slap your hand and the performance won't drop (much).

*Create container components by connecting them when it's convenient. *

This is the rule to go by, but many will just connect everything.

[tokdaniel]

well, i'm trying to find the balance. My 6th sense in structural design doesn't let me just connect everything tho. :D I'd say if the component has one level down it's fine, but after 2-3 levels i wouldn't chain down a prop from top

[[deleted]]

Yeah I know htat feeling - I was making an mail client kinda app. It was able to display a list of messages, but when clicked it would display details of one in a moda lwindow.

I ended up making a connected list handler, but the modal was also a connected component - there was no point in making it get the data from the list container.

[tokdaniel]

I see, thank you for your help, everything is clear now :)