Question

我是react的新用户并使用react-router-dom@v4和react-redux构建应用。

App 组件如下所示：

    <Router>
        <Grid container>
            <Grid item xs={12}>
                <Header/>
            </Grid>
            <Grid item xs={12}>
                <Route exact path="/" component={Dashboard}/>
                <Route path="/admin" component={Admin}/>
            </Grid>
        </Grid>
    </Router>

并且 Root 文件呈现为：

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));

现在的问题是：

两条路线都包含相同的store.dispatch，其值不同：

第一条路线/

 store.dispatch({type: "active": payload: 1})

第二条路线/admin

 store.dispatch({type: "active": payload: 0})

现在，当应用程序在索引路由/上运行时，它运行dispatch()并提供值1 ...正确。但之后它还会从另一条路线dispatch()运行/admin并将值更新为0 ...我不想要...

我想要的是什么：

当我在该路线上不是一次从所有路线开始时，该应用程序应运行dispatch()。

任何帮助将不胜感激：

：）

欢呼声。

Answer 1

最后，我找到了这个问题的答案，即如何避免从所有路径运行dispatch()一次的问题。

简单地将store.dispatch()放在ReactJS组件的生命周期钩子中，就像放入componentDidMount()一样，它只会在用户在该组件/路径上时调用。

以下是一个例子：

componentDidMount() {
    store.dispatch({type: "active", payload: 0});
}

react router和redux dispatch（）从所有路由运行一次而不是仅当前路由

1 个答案: