ReactJs - 从 URL 查询参数初始化 Redux Store

Question

我对 ReactJs 和 Redux 非常陌生。我能够设置一个简单的应用程序，其中包含多个 React 组件，可在单击按钮、下拉选择等时将操作分派(dispatch)到 Redux 存储。但我似乎无法弄清楚的一件事是，您将如何初始化应用程序的状态基于 URL 参数？

例如，假设您有一个用户个人资料页面，并且根据“userid”URL 参数，您希望在页面首次加载时显示不同的用户数据。我最初想到的是使用“componentDidMount”生命周期方法并向商店发送一个操作——可能类似于“loadUser(userid)”。但这似乎有点矫枉过正 - 是否有一种普遍接受的方式从一些初始值填充商店？

Answer 1

如果您需要路由特定变量，那么使用路由参数初始化状态和重新运行操作可能是最简单(也是最佳实践)。

如果您使用基于类的组件，loadUser(userId) 将需要在 componentDidMount 和 componentDidUpdate 中。

对于功能组件，有 React hook useEffect() 代替(这似乎正在成为最近最好/更好的实践)。

例如:

如果您在 routes.js/app.js 中使用 react-router-dom，您将拥有如下路线:

<Route path='/some/path/:userid' component={someComponent}/>

然后使用 props.match.params 和 useEffect 以及 userid 作为依赖:

import React , {useEffect} from 'react'
import {connect} from 'react-redux'
import * as actions from 'path/to/redux/actions'

// destructure `match.params.userid`, redux `user` and redux action `loadUser` from props
const someComponent = ({ match:{params:{userid}} , user ,  loadUser}) => {

    useEffect(()=>{
      userid && loadUser(userid)
    },[loadUser , userid]) // runs after first mount and every time userid changes

    return <div>{user && user.id}</div>
}

connect(
    ({user})=>({user}),
    actions
)(someComponent)