CODEWITHSUNDEEP
reactjsreduxarchitecture
tyehia
tyehia

Reputation: 267

React + Redux - architectural Apis approach

I have a react app with redux, I two api calls that get the data for me.

The first api call returns a group of questions array.

The seccond api call returns a group of answers for each question

I also have an api call to get the answers for specific question

First Api Call

{parent: 1, name: "default", id: 36}
{parent: 36, name: "help?", id: 2}
{parent: 36, name: "help me?", id: 3}
{parent: 35, name: "Don't help them?", id: 3}

Second Api Call

{answer: "Yes", questionid: 2, id: 1, question: "help?"}
{answer: "No", questionid: 2, id: 2, question: "help?"}
{answer: "Maybe", questionid: 2, id: 3, question: "help?"}
{answer: "Yes", questionid: 3, id: 1, question: "help me?"}
{answer: "No", questionid: 3, id: 2, question: "help me?"}

Data should appear like below

Group Name: default

help? Yes, No, maybe

help me? Yes, No

How can I do this, should I loop for the questions then every question I should loop for the answers, all in two api calls, or I should loop on the questions and every question I should call the api for the answers?

Upvotes: 0

Views: 44

Answers (1)

Shiroo
Shiroo

Reputation: 666

You can use reselect (library) and you could get correct result thanks to that by merging properties in selector. https://github.com/reduxjs/reselect

It is well normalized state so there is no point in denormalizing it.

So firstly you would get all elements from normalized state and then get all possible results from second API. Iterate through first elements and filter out answers from 2nd API where parentId doesnt equal to id.

Upvotes: 1

Related Questions