3

So i'm fairly new to React and I can't wrap my head around a concept on how to re-render a main component based on another component.

Lets say we have a to-do application and a to-do item can have a state (new, running, closed). We are displaying all to-do items in a list and we can filter the items based on their state. We are using a bootstrap dropdownbutton like component to set the filter, which is a React component. Now when we change the filter we obviously want to refresh the to-do items.

My question is, does the logic of the selected state belong in Flux/Redux or does the filter component just say "refresh your items" to the main component?

user1322163
  • 109
  • 1
  • 9

3 Answers3

6

When you use Redux in React application, follow one simple rule - all your components are stateless (means, no component initializes its state or calls .setState() anywhere).

The redux way of design based on state container, one big object that holds all application state. As React component, being connected to Redux store, Redux will pass the state (or portion of it) into that component, as this.props.state property.

That high-order component (or smart component), renders its children components (or dumb components) and handles events from them.

If child component requires change, it triggers corresponding handler (which typically passed as props). The only way to change the state is to dispatch an action. That action contains a type and a payload and based on that type, corresponding reducer is selected. The reducer then produces a new state, based on previous state and action payload.

If in the result of reducer call, state got changed, Redux will re-render high-order component, passing new state in properties. So, all child components will be updated correspondingly.

Check this example and trace how AddTodo component calls .handleClick() and then upper to .onAddClick() which dispatches an action.

Alexander Beletsky
  • 19,453
  • 9
  • 63
  • 86
  • 1
    Note it doesn't *have* to be one container component (aka smart component). You can have many container components in the app. – Dan Abramov Nov 18 '15 at 23:05
  • Sorry to bring the old topic up and @DanAbramov maybe you can help me understand this. How exactly is the high-order component re-rendered? I've seen you `subscribed` to the higher-order component but I don't see it anywhere on other tutorials or seed projects. Does `connect` magically do that for us? And if so, is it just the component that gets re-rendered or the whole app? – shriek Jul 08 '16 at 18:48
  • I think I get it now. `connect` is actually subscribing to the `state` of the app and forcing an update when `state` of redux store changes which also should clarify my latter doubt. – shriek Jul 10 '16 at 04:55
1

If you are using redux, then on your dropdown you should have an onchange handler that dispatches an action every time the value is changed with the selected state (new, running, closed).

Redux reducer will handle this action by changing some state accordingly in the store for example: display = 'completed'. In addition to this, your todo list should also be stored in the store and it will likely be an array.

Your react component should receive a the todo array and display as props, and therefore everytime any prop (todo array or display) change, it will trigger a re-render.

In this case, your component should only display those todos that are complete (i.e. in the render you check if the state of each todo === this.props.display.

So to answer your question: redux keeps the state of the dropdown, which is passed to your main component, your main component then render only the todo's that matches the criteria.

luanped
  • 3,178
  • 2
  • 26
  • 40
-1

So in a very minimal way, you could pass a function down to the select box, which calls setState on the top-level component. When that state changes, it will re-render its child components. This pattern doesn't scale well, and leads to the same hell React + Flux is trying to get us away from (state everywhere). I would say, using Flux (or even better, Redux), trigger an action that sets the filter in your store, and use derived data based on the filter state + your list of todo's in the todo list.

Steven
  • 1,566
  • 2
  • 16
  • 38
  • Yea that's what I thought too, but it seemed like an overkill to use for such a small thing. I haven't thought about having a lot of those components, I suppose it makes more sense to put this logic in redux when you think about it that way. – user1322163 Nov 12 '15 at 10:24