问题
I am building a small application with the intention of learning some design principles (api/data structure) along with new frameworks and languages, specifically ReactJS w/ Redux on the Frontend and Golang on the backend (restful API).
I am struggling with how I should structure components and routes, along with my API, based on the react container component way of thinking in which single responsibility principle is followed. As
Let's say I have two objects types, Companies
and Houses
which all reside in a City
and may have some commonalities such as a Street
. With that said, I will want my web application to be aware of these commonalities. I believe I would structure the API as follows:
GET/PUT/POST/DELETE:
https://0.0.0.0/api/companies
[
{ "id": 102650,
"name": "Corp",
"street": "Savannah",
"content": "..."
}, ...
]
https://0.0.0.0/api/houses
[
{ "id": 40,
"name": "Old Brick House",
"street": "Savannah",
"content": "..."
},...
]
https://0.0.0.0/api/city
{
companies: [{
"id": 102650,
"name": "Old Brick House",
"street": "Savannah",
"content": ".."
},...]
houses: [
{
"id": 40,
"name": "Old Brick House",
"street": "Savannah",
"content": ".."
},...]
}
Now for my React container component structure I would have (I know the below snippet is wrong... this is where I need help):
...
<BrowserRouter>
<City>
<Switch>
<Route path="/Houses" component={ Houses } /> <!-- Where to pass data? -->
<Route path="/Components" component={ Components } />
</Switch>
</City>
</BrowserRouter>
...
Where City
would be the one to make the GET
call to endpoint https://0.0.0.0/api/city
so that the sibling containers could have access to each other's data (assume both containers are simple lists with CRUD commands).
Now for my questions: How should I pass data to the seperate routed components (Houses
and Companies
)? Also, am I designing the api correctly? As of now, I will never call GET
on my houses
or companies
endpoints b/c I'll always be fetching at the city level due to the ReactJS structure.
来源:https://stackoverflow.com/questions/44712110/sharing-state-between-sibling-components-with-routes