react-router - 使用 React Redux Router，我应该如何访问路由的状态？

Question

使用 react-router-redux，似乎获取路由信息的唯一方法是仅通过 props。这是正确的吗？

这大致是我现在在我的应用程序中所做的事情:

<Provider store={Store}>
  <Router history={history}>
    <Route path="/" component={App}>
      <Route path="child/:id" />
    </Route>
  </Router>
</Provider>

应用程序

const App = (props) => 
  <div className="app">
    <Header />
    <Main {...props}/>
    <Footer />
  </div>

主要的

const Main = (props) => 
  <div>
    <MessageList {...props}/>
  </div>

消息列表

let MessageList = (props) => {
  const {id} = props;

  // now I can use the id from the route
 }

const mapStateToProps = (state, props) => {
  return {
    id: props.params.id
  };
};

MessageList = connect(mapStateToProps)(MessageList)

我会怎样 喜欢 要做的是从我的所有组件中删除 {...props} ，并将 MessageList 变成这样:

let MessageList = (props) => {
  const {id} = props;

  // now I can use the id from the route
 }

const mapStateToProps = (state) => {
  return {
    id: state.router.params.id
  };
};

MessageList = connect(mapStateToProps)(MessageList)

对于 Redux 让我的应用程序变得多么干净，必须在所有东西中传递 props 感觉就像是一个很大的倒退。所以如果传递参数是正确的，我想知道为什么那更可取？

我提出这个问题的具体案例:

我有一个发送消息的 UserInput 组件(发送 SEND_MESSAGE 操作)。根据当前页面(聊天室、消息提要、单个消息等)，reducer 应将其放在正确的位置。但是，使用 react-redux-router，reducer 不知道路由，所以它不知道将消息发送到哪里。

为了解决这个问题，我需要传递 Prop ，将 id 附加到我的 SEND_MESSAGE 操作中，现在原本简单的 UserInput 正在处理我的应用程序的业务逻辑。

Answer 1

我不会解决您的问题(如何读取状态)，而是自己解决您的问题(如何根据当前路线调度不同的操作)。

让您的UserInput一个 presentational component .让我们接受 onSend，而不是在其中调度prop 是所有者组件提供的回调。输入将调用 this.props.onSend(text)对 Redux 或路由一无所知。

然后，制作 MessageList也是一个接受 onSendMessage 的表示组件作为 Prop ，转发给UserInput .再次，MessageList将不知道路线，并将其传递给 <UserInput onSend={this.props.onSendMessage} /> .

最后，创建一对容器 包装 MessageList 的组件对于不同的用例:

聊天室消息列表

const mapDispatchToProps = (dispatch) => ({
  onSendMessage(text) {
    dispatch({ type: 'SEND_MESSAGE', where: 'CHAT_ROOM', text })
  }
})

const ChatRoomMessageList = connect(
  mapStateToProps,
  mapDispatchToProps
)(MessageList)

提要消息列表

const mapDispatchToProps = (dispatch) => ({
  onSendMessage(text) {
    dispatch({ type: 'SEND_MESSAGE', where: 'FEED', text })
  }
})

const FeedMessageList = connect(
  mapStateToProps,
  mapDispatchToProps
)(MessageList)

现在您可以直接在路由处理程序中使用这些容器组件。他们将指定正在调度哪个 Action ，而不会将这些细节泄露给下面的演示组件。让您的路由处理程序负责读取 ID 和其他路由数据，但尽量避免将这些实现细节泄露给下面的组件。在大多数情况下，当它们由 Prop 驱动时会更容易。

解决原始问题，不，如果您使用 react-router-redux，则不应尝试从 Redux 状态读取路由器参数.来自 README :

You should not read the location state directly from the Redux store. This is because React Router operates asynchronously (to handle things such as dynamically-loaded components) and your component tree may not yet be updated in sync with your Redux state. You should rely on the props passed by React Router, as they are only updated after it has processed all asynchronous code.

有一些 experimental projects它们确实在 Redux 中保留了整个路由状态，但它们还有其他缺点(例如，React Router 状态是不可序列化的，这与 Redux 的工作方式相反)。所以我认为我上面写的建议应该可以很好地解决你的用例。