CODEWITHSUNDEEP
reactjsfluxreactjs-fluxredux
user1322163
user1322163

Reputation: 109

Refresh logic in react component or flux/redux?

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?

Upvotes: 3

Views: 2558

Answers (3)

Alexander Beletsky
Alexander Beletsky

Reputation: 19831

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.

Upvotes: 6

luanped
luanped

Reputation: 3198

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.

Upvotes: 1

Steven
Steven

Reputation: 1596

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.

Upvotes: -1

Related Questions