CODEWITHSUNDEEP
reactjsreact-routeralt
theog
theog

Reputation: 2092

React architecture

This is more an architect question with react.js in mind.

Where would I place the following business logic ?

Once a user has authenticated and we then have access to their user entity. I would like to check a value on the user object and if null populate it will data I can only get on the client and then patch that object. All the code to get, patch an object are within alt.js stores. But this is business logic and doesn't feel right that it's part of the store.

I have considered a react component that is set as a component on the root react route. But it doesn't feel like it's the right place as it does not render anything.

Upvotes: 1

Views: 212

Answers (2)

Ryan C.
Ryan C.

Reputation: 559

This is not really a concern of React, like you said it is more of an architectural choice.

Like the previous posts have shared, you could use the React lifecycle methods. Perhaps a better approach is to use a state management library like Redux.

If you have yet to use Redux, I would highly recommend it! Although, it is not always the best choice, it seems to work for 99% of my use cases!

Good luck!

Upvotes: 1

fresh5447
fresh5447

Reputation: 1340

Have you used context before?

You could create a context component with a getUser function. This component will handle all the business logic for the User entitiy.

The beauty of context is that it does not need to be a parent or child of other components.

You simply import the getUser via context and you can user the function. IE any component that needs to know User context can do something like this.

componentDidMount() { 
  this.context.getUserInfo((data) => this.setState({ user: data }))
}

Another use case for Context would be a notifier. A notifier may need to be used randomly throughout your app, passing down as props whenever needed would be a nightmare.

Instead, create it as context, and import it as needed.

If this sounds like it may be useful, I will provide an example.

Further, you can checkout the react docs

Upvotes: 0

Related Questions