reactjs - Redux - reducer 中的外部库和 "React"？

Question

我有简单的 Redux reducer ，但对于某些操作，我需要显示通知，为此，我需要在 reducer 中触发我的自定义通知功能，因此:

case REDUCER_ACTION_NAME:
  notificationDisplay.success("Message", {
    additionalStuff: extraOptions
});

更糟糕的是，我正在使用 react-intl 进行翻译，并且我需要 "Message"o 做好翻译准备，所以我将其添加到混合中:

case REDUCER_ACTION_NAME:
  notificationDisplay.success(<FormattedMessage id="message" defaultMessage="Message" />, {
    additionalStuff: extraOptions
});

它在跨度中创建翻译并需要 react 所以我的 reducer 从这些导入开始:

import React from 'react';
import notificationDisplay from 'my-notifications';
import { FormattedMessage } from 'react-intl';

import {
  // all the actions
} from './actions.jsx';

// reducer

还好吗？我觉得这里有些不对劲 - 就像在 reducer 中导入 React 是一种反模式，因为我能找到的所有 reducer 示例都非常干净和时尚，并且那里没有任何外部库。

我是对还是错，我的代码完全没问题？

Answer 1

你不应该在reducer中进行任何类型的计算。它应该改变状态而不是其他任何东西。您使用它的方式完全是反模式。因为它正在执行一些 UI 操作。而且 Redux 与 UI 无关。它应该用作商店并且仅用作商店。

但是你可以使用Actions，这比在reducer中执行要好得多。

实现目标的最佳方法是使用 reducer 将消息推送到 redux 存储中的数组中。并创建一个使用该消息数组来显示成功或错误消息的容器。并创建一个计时器，在一段时间后从数组中删除消息。

看看 https://github.com/diegoddox/react-redux-toastr repo 他们做得很好。

谢谢

阿基尔·P