【问题标题】:What is the correct way of dispatching an action not tied to a component with Redux?使用 Redux 调度与组件无关的操作的正确方法是什么?
【发布时间】:2016-03-23 17:23:38
【问题描述】:

我有一个项目,其中 nodejs 服务器通过 socket.io 将推送事件传递到反应仪表板,我正在使用 Redux。当收到新数据时,会触发更新所有相关组件的操作,尽管我不确定我这样做的方式是否正确。

这是我监控来自服务器的新传入数据的方式:

  socket.on('incidents', state => {
    boundActionSetIncidentsList(state);
  });

这是对新数据调用的有界动作创建者:

  import { store } from '../index';

  export function boundActionSetIncidentsList(incidents) {
    store.dispatch(actionSetIncidentsList(incidents));
  }

我需要 store 来调度动作,正如你所看到的,我粗暴地从主 index.js 导入它。它是这样创建的:

  export const store = createStore();

作为 react 和 redux 的新手,我想知道 redux 调度不是从容器或展示组件触发的动作的方式是什么。谢谢!!

【问题讨论】:

    标签: reactjs redux


    【解决方案1】:

    您可以包装您的代码,该代码将套接字侦听器设置为一个将存储作为参数的函数。因此,至少您的客户端主例程可以设置存储并在它准备好时将其传递给套接字侦听器。

    您也可以尝试使用库来提供帮助。下面是一些 redux 中间件,它可以在服务器发送数据时自动将 action 分发到 store:

    https://github.com/itaylor/redux-socket.io

    【讨论】:

    • 确实包装实际上是最直接的方法,虽然使用中间件肯定更优雅,谢谢布兰登。
    【解决方案2】:

    一般建议是在 Redux 中间件(可以访问商店的 dispatch 方法)中管理您的套接字连接,或者在处理组件挂载/卸载时的套接字并可以使用 React- Redux connect 函数获得对dispatch 的访问权限(或用于套接字事件的预绑定动作创建者)。

    【讨论】:

      猜你喜欢
      • 2018-07-24
      • 1970-01-01
      • 1970-01-01
      • 2019-01-13
      • 1970-01-01
      • 2013-07-02
      • 1970-01-01
      • 2018-11-13
      • 2014-09-26
      相关资源
      最近更新 更多