Question

我想先说这是我的第一个使用React Redux和Socket.IO的项目。我也不知道构建正确的构建，启动和测试脚本需要什么。我对webpack的了解也非常有限，我只觉得添加或删除加载器非常舒服。我发现在create react app中有很多预配置非常有用;开玩笑，热装，构建输出。如您所知，react-create-app使用webpackdev服务器。但是，对于我的应用程序的服务器端部分，我有一个类似于此配置的socket.io服务器。

import Server from 'socket.io';

export function startServer(store) {
  const io = new Server().attach(8090);

  store.subscribe(
    () => io.emit('state', store.getState().toJS())
  );

  io.on('connection', (socket) => {
    socket.emit('state', store.getState().toJS());
    socket.on('action', store.dispatch.bind(store));
  });

}

基本上我正在寻找一种资源，甚至更好的解释，可以帮助我将socket io和redux与react-create-app的最佳部分结合起来。

Answer 1

我最终完全摆脱了webpack并删除了脚本。我将测试脚本重写为一个简单的jest命令。按照这个来完成socket.io配置。 https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

您还可以立即查看应用程序的外观。 https://github.com/donleyac/react-card-engine

Answer 2

对于客户端，我建议按照本指南进行项目管理。

Redux guide

对于socket.io集成，我建议使用两个Redux中间件，它们允许您使用redux范例订阅事件并发出消息。

socket.io-emitter-middleware

socket.io-subscriber-middleware

您可以通过以下命令进行安装

npm i socket.io-emitter-middleware

npm i socket.io-subscriber-middleware

并遵循github文档中的自述文件进行使用。

服务器部分可能运行良好。您不得将create-react-app环境与客户端/服务器体系结构混淆。 create-react-app环境仅是“客户端”。

您需要通过socket.io将客户端react应用与node.js服务器连接。

我建议您从socket.io文档开始。

Socket.io Introduction

React Redux + Socket.IO +创建React App

2 个答案: