React Router Redux - 在路由更改时发送异步操作？

Question

我有一个使用 redux 和 react-router 的通用 React 应用程序。

我有以下几条路线：

 /2016
/2015
/2014
/2013

等等

每条路线都需要来自 API 的数据。目前，我在导航组件中有 <Link> 元素分派一个异步操作 onClick ，它使用来自该路由的 API 的数据填充商店。

对于 MVP，我只是在路由更改时用新的帖子内容覆盖商店中的 post: {} 内容，这样我们就可以获得 API 上的任何新内容。

我意识到在 <Link> 按钮上设置动作调度程序并不是最佳选择，因为点击后退按钮不会重新触发动作调度程序以获取上一条路线的内容。

有没有办法让 React Router 在发生路由更改时触发调度操作？ （限制它收听一组特定的路线将是一个好处）。

我意识到我应该从商店获取历史记录，但现在，通过触发动作分派来再次访问 API 以获取新内容 更容易。

干杯。

原文由 Scotty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

“生命周期”挂钩 onEnter 和 onChange 已在 React-router 4 中删除，这使得该问题的大多数其他答案已过时。

虽然我建议您使用您的组件 生命周期方法 来实现您的目标，但这里是您的问题的答案，它适用于 React-router 4。

今天有效的是使用 React 路由器的开发人员自己创建的 历史库 来监听历史变化，并从那里分派异步操作。

 // history.js
import createHistory from "history/createBrowserHistory"

const history = createHistory()

// Get the current location.
const location = history.location

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
    //Do your logic here and dispatch if needed
})

export default history

然后在您的应用程序中导入历史记录

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}

资料来源： 历史库 React 路由器文档

原文由 Matthew Barbara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是的，React Router 有 onEnter 和 onLeave 钩子。你可以构建你的路由来获取你的 store 实例，这样你就可以在这些助手中访问它：

 const createRoutes = (store) => {
  const fetchPosts = () => store.dispatch({
    types: ['FETCH_POSTS', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAIL',
    url: '/posts'
  });

  return (
    <Route path="/" component={App}>
      <Route path="posts" component={PostList} onEnter={fetchPosts}/>
      <Route path="posts/:id" component={PostDetail} />
    </Route>
  )
}

更好的解决方案是使用类似 redial 或 redux-async-connect 之类的东西。这允许您将组件的数据依赖项与组件放在一起，同时保留在不接触网络的情况下测试组件的能力。

_编辑_：这适用于不再受支持的旧版本 react-router 。

原文由 Steven 发布，翻译遵循 CC BY-SA 4.0 许可协议