React / Redux - 使用 useRouteMatch 设置初始状态

Question

我在我的 React 项目中使用函数式方法，我有一个 <App> 组件、<List> 组件和 <Item> 组件（分层）。我的 redux store 有 items 和 date state.

<List> 有一个 items 和 date 属性，并根据 date [=51= 迭代渲染部分中的那些 items ]state 来自 store:

(List component. Before my 'try' and using hardcoded initial store `date` state)
    useEffect(()=>{
      dispatch(getItems(date)); (async () gets items from api with thunk > reducer > updates store state)
    }, [])

我正在尝试的是当用户输入 localhost:port/test.但是，如果用户输入以下 url: localhost:port/test/25-3-2021 我想从 url 中获取类似日期的字符串并更新我的 date state 在商店中。基本上是尝试在每次日期更改时更新其项目。

注意：我没有任何 <Link> 通向每个 list/date。所以我尝试做的是使用 useRouteMatch 钩子。我尝试了一些东西，但我不确定我是否有正确的方法，因为我是新手。

索引()

<Router>
      <Switch>
            <Route path='/test'>
                <App />
            </Route>
      </Switch>
</Router>

App()

let match = useRouteMatch('/test/:para')
return (
   <div>
       <List match={match} />
    </div>

List({ dispatch, items, date, match })

let target = match.path;
let dateFromUrl = match.url.split('/')[2];

useEffect(() =>{
     if(target === '/ts/:para'){
            dispatch({type: UPDATE_DATE, payload: {dateFromUrl} })
      }else{
            let dateFromUrl = '19-3-2021'
            dispatch({type: UPDATE_DATE, payload: {dateFromUrl} })
      }
    
       dispatch(getItems(date)); 
}, [])

这是我尝试过的方法，不确定这种方法是否糟糕。另外，我的 getItems(date) 在我的 dispatch(UPDATE_DATE) 完成更新商店中的 date 状态之前执行，我不确定如何使用某种异步功能来避免这种情况。

Answer 1

所以有几件事：

如果 url 中有日期，则不需要将其设置到 redux 存储中。只需将 url 视为一种客户端状态并使用它即可。

要获取日期，请尝试使用 useParams 挂钩：

List({ dispatch, items}) {
    const { date = '19-3-2021' } = useParams(); // This will set a fallback, if no date is set
}

并将其映射为

index({ dispatch, items}) {
  <Router>
      <Switch>
            <Route path='/test/:date' children={<App/>} />
            <Route path='/test/' children={<App/>} />
      </Switch>
</Router>
}

现在像这样发送：

useEffect(()=>{
      dispatch(getItems(date));
    }, [date]) // This will now be executed for every date change as well

React / Redux - 使用 useRouteMatch 设置初始状态

React / Redux - setting initial state with useRouteMatch

routes

reactjs

react-router

redux