将 React-Router 集成到 React-Redux 挂钩应用程序中答案

【问题标题】：Integrating React-Router into a React-Redux hooks app将 React-Router 集成到 React-Redux 挂钩应用程序中
【发布时间】：2020-09-20 05:05:52
【问题描述】：

我对如何在 redux 项目中设置 React Router 感到有些困惑。这是我的顶级组件的简化：

const App = () => {

  const [data, setData] = useState();

  useEffect(() => {
    const data = fetchData(); //initial async data fetch
    setData(data);
  }, [])

  useEffect(() => {
    if (data) {
      const initialUsState = getRandomState(data.state);
      const intitialUsCounty = getRandomCounty(data.county);

      //these are action creators that dispatch to the store after the intial data fetch
      dispatchUsState(initialUsState);
      dispatchUsCounty(intitialUsCounty);
    }
  }, data)

  const UsState = useSelector(state => state.UsState); //react-redux state selector hooks
  const UsCounty = useSelector(state => state.UsCounty);

  const getPlotData = () => {
     const plotData = createPlotData(UsState, UsCounty);
     return plotData;
  }

  return UsState && UsCounty ? (
    <Router>
      <Route path={`/:${UsState}/:${UsCounty}`} >
        <ComponentOne UsState={UsState} UsCounty={UsCounty} />
        <ComponentTwo UsState={UsState} UsCounty={UsCounty} />
        <Scatterplot plotData={getPlotData()}
      </Route>
    </Router>
  )
  :
  null;

我遇到了一些问题：

当我在本地运行时，在localhost:8080/，我没有看到任何东西被渲染到屏幕上。我假设这是因为我处于根级路径？当UsState 和UsCounty 可用时，如何自动到达/:${UsState}/:${UsCounty} 路径？
UsState 和 UsCounty 都是存储中的值。如果我将我的 url 更改为我知道有效的特定 /:${UsState}/:${UsCounty} 路径，redux 将如何将适当的 UsState 和 UsCounty 分派到商店，以及完成初始数据获取？
另外，如果 URL 中提供了/:${UsState}/:${UsCounty}，我不想将随机的州和县分派到商店，因为它已经存在于 URL 中。

【问题讨论】：

我发现你的 useEffect 有问题。这取决于data 的变化以及它设置data。这不会造成无限循环吗？
哦，哇，上面打错字了。我会改的

标签： reactjs redux react-router

【解决方案1】：

想出了我自己问题的答案。在顶级 index.js 中，在 <Switch> 组件中设置路由，如下所示：

const jsx = ( 
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/">
          <CovidApp />
        </Route>
        <Route path="/:state/:county">
          <CovidApp />
        </Route>
      </Switch>
    </Router>
  </Provider>
);

第一次使用确切的根目录/访问站点时，在子组件CovidApp中，我设置了一个useEffect()钩子以及useHistory()react-router钩子来更新路径当我的任何一个 redux 存储值 UsState 和 UsCounty 更改时：

const history = useHistory(); //react-router hook

useEffect(() => {
  if (UsState && county) {
    history.push(`/${UsState}/${county}`);
  }  
}, [UsState, county]);

那么，上面的switch语句会自动切换到"/:state/:county"路由。

同样在 CovidApp 中，当我第一次导航到该站点时，我会检查参数是否已经存在。如果它们确实存在，我会将它们发送到商店：

 const params = useParams(); //react-router hook

 useEffect(() => {
    const urlHasParams = !!Object.keys(params).length;
      //if there are params when first visiting site and data is available: get each param, lookup in dict, and dispatch to store
      if (covidData && urlHasParams) {
        dispatch(dispatchUsState(params.state));
        dispatch(dispatchCounty(params.county));
    }
  }, [data]);

【讨论】：