Sharing state between sibling components with routes

旧城冷巷雨未停 提交于 2019-12-22 14:46:08

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!