CODEWITHSUNDEEP
javascriptreactjsarchitecture
Alex
Alex

Reputation: 195

Manage Data with React Components

I am trying to build a new react app and I have some question about the architecture.

I have 2 components:

Each Component has several inputs and api functions to get the data and also to update it.

When I use both components in one Page, how can I trigger an update for both components?

Page

The Submit Button should trigger the Update function and wait until both are finished. I tried to give a function from the Page to the child components via props, but I think this is the wrong way.

Upvotes: 1

Views: 43

Answers (1)

Joe Lloyd
Joe Lloyd

Reputation: 22323

Redux

For complex interactions between different components you can use redux. Redux holds the state of your entire application and can only be updated with actions. An action will trigger a reducer. A reducer returns a new version of the state with what ever update you set there.

Treat redux some what like a database, do not store things multiple times and keep a good separation of concerns. There's an awesome library that lets you aggregate and manipulate data called reselect.

Reselect

This library will let you take several parts of the store and combine them for your needs in any given scenario.

Conclusion

To conclude, these's libraries are part of a stack I've been using for about 2.5 years (reselect only 1 year). I've found them very powerful for handling complex data. That being said there are other options like graphql, apollo or relay.

Upvotes: 1

Related Questions