React Redux + Socket.IO + 创建 React App

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 并删除了脚本。我将测试脚本重写为一个简单的玩笑命令。按照此完成 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 环境与 client/server 架构混淆。 create-react-app 环境只有 "client side".

您需要通过 socket.io.

将客户端 React 应用程序与 node.js 服务器连接起来

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

Socket.io Introduction

React Redux + Socket.IO + 创建 React App

React Redux + Socket.IO + Create React App

reactjs

socket.io

webpack

redux

create-react-app