React-Router:基于redux reducer中创建的值的导航

Question

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

我想模仿其他应用程序的行为时，一个新的乐队被创建。也就是说，导航到新的波段。

应用的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操作的例子，但没有其他方法。

Answer 1

假设频带和输入框列在MenuBar组件内。您可以在这个组件中编写一个componentWillReceiveProps方法。当一个新的Band被创建时，确保reducer向MenuBar组件发送一个响应。

现在在componentWillReceiveProps中写一个条件，如果创建了一个新的频带，则执行该条件。

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

Answer 2

建议使用Redux-Thunk https://github.com/reactjs/redux/issues/1543#issuecomment-201364298

我还没有试过，但是在:

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

当我有机会真正这样做时，我会用最后的代码更新它