React-Router：基于 redux reducer 中创建的值的导航答案

【问题标题】：React-Router: Navigation based on value created in redux reducerReact-Router：基于 redux reducer 中创建的值的导航
【发布时间】：2016-08-09 13:49:37
【问题描述】：

我正在尝试使用 React-Router 和 Redux 创建 https://rarwe-demo.pagefrontapp.com/bands 的 React.js 版本。

我想在创建新乐队时模仿其他应用的行为。即，导航到新频段。

应用程序的 URL 是 .../bands/<bandid>/songs。我将波段存储在一个数组中，<bandid> 是数组的索引，我不知道它是什么，直到在它被创建之后。

[
    {
        id: 0,
        name: 'Pearl Jam',
        songs: [
            ...
        ]
    },
    {
        id: 1,
        name: 'Led Zeppelin',
        songs: [
            ...
        ]
    },
]

我的第一个想法是调度另一个动作。但是基于乐队名称的“changeUrl”操作似乎是错误的。另外，由于创建操作可能需要一段时间，我该如何以正确的顺序执行此操作？

在 Redux 中存储“selectedBand”值也感觉不对，因为我必须确保 URL 和这个值是同步的。

我认为有一种“标准”的做法，但我的 google-foo 让我失望了。我已经找到了很多基于 URL 转换触发 Redux 操作的示例，但反之则不然。

【问题讨论】：

标签： reactjs redux react-router react-redux

【解决方案1】：

假设波段和输入框列在MenuBar 组件中。您可以在此组件中编写componentWillReceiveProps 方法。并且在创建新的 Band 时，确保 reducer 向 MenuBar 组件发送响应。

现在在componentWillReceiveProps 中写一个条件，如果一个新的乐队被创建，这将被执行。

browserHistory.push('/bands/<newbandid>/songs')

【讨论】：

如何“确保reducer向MenuBar组件发送响应”？这听起来像是在我认为应该避免的状态中添加一些东西
连接组件。它将能够访问商店。阅读redux documentation了解详细说明。

【解决方案2】：

似乎推荐的方法是使用 Redux-Thunk https://github.com/reactjs/redux/issues/1543#issuecomment-201364298

我还没试过，但是里面有这样的东西：

dispatch(create_action);
get_new_id_from_state();
browserHistory.push(new_id);

当我有机会实际执行此操作时，我将使用最终代码对其进行更新。

【讨论】：