Question

我有一个带有选择控件的react组件，该控件允许用户选择特定城市（此表单上的其他选择控件）。当前选择的城市存储在redux存储中。到目前为止，一切正常，看起来像这样：

const MyFormSectionComponent = (props) => {
    const dispatch = useDispatch(); /* using redux hooks */
    const cityName = useSelector((state) => state.cityName);

    return (
        <div>
            <MyCustomSelectControl
                value={cityName}
                options={possibleCities}
                onChange={(value) => {
                    dispatch({ type: "SET_CITY", city: value });
                }} />
        </div>
    );
}

一切正常。当用户从MyCustomSelectControl中选择一个新城市时，onChange将调度SET_CITY操作，而我的useSelector调用意味着在redux存储更新后，所有这些都将重新呈现。

那么我的问题是，基于呈现组件的URL 之前，在redux中设置cityName的“正确”方法是什么？我希望能够预发布一个基本上看起来像/myform/:cityName的URL，这样，如果用户点击此URL，则select控件将提供预先选择的cityName。

我正在使用react-router，目前我想到的是这样的：

const store = createStore(myRootReducer);

function App() {
    return (
        <Provider store={store}>
            <Router>
                <Switch>
                    <Route path="/myform/:cityName" render={({match}) => {
                        store.dispatch({ type: "SET_CITY", city: match.params.cityName });
                        return <MyFormSectionComponent/>;
                    }} />
                </Switch>
            </Router>
        </Provider>
    );
}

这似乎工作正常，但是作为React和Redux的新手，我担心在Route的render属性中对dispatch的调用，因为我在网上可以找到的好像是从渲染方法是不好的做法。这样有潜在的“陷阱”吗？我在该主题上能找到的大多数现有问题都没有使用钩子。

使用钩子时，从URL更新Redux存储的正确方法是什么？

0 个答案: