Redux

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
});

它在 span 中创建一个翻译并需要 react 所以我的减速器从这些导入开始：

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 回购，他们做得很好。

谢谢

阿基尔 P

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

Redux - external libs and "React" in reducer?

reactjs

react-intl