Passing Data between APIs and Database with React

Question

I am creating a project but very new to React and async programming. I am using React to display users email via an API.

I can get all the email data via ComponentDidMount calls to the API. It displays them correctly and I can get subject,body etc. Now, I need to send the body of the currently selected email via a button to my back-end side, do some work with it (compare strings to database etc) and then fetch back the result and display it in a div. What would be the best way to go about it?

I couldn't find any good answers to this from google.

Should I have gotten emails and done all that work all server side first somehow before fetching both the body and the result along with it with React? Or is there a way I can send the current body string out to my controller, do the work and then get the result back all in async?

Thank you in advance!

Answer 1

Although this question is too vague to answer but I know what you're coming from and I want to give you some ideas about the general structure of a React-related project:

• The backend side should be designed to Restful Api Endpoints.
• Use Redux to manage frontend (react) application's state.
• Use Redux-thunk (or Redux-saga) to manage side-effects (call api)
• In componentWillMount or componentDidMount, use Redux dispatch to dispatch an action to Redux then use Redux-thunk (or Redux-saga) to call api and update application's state.
• The component which is connect to application's state will be updated based on state's changes.

It's long way to go but hey, that's what all of us have to go through. Good luck!

PS: If any terms are not familiar with you, do some google-ings.