Você já tentou fazer um jogo multiplayer no browser? em pouco tempo sincronizar o estado pode ser tornar o pesadelo. Tirando proveito do modelo do redux de fluxo único de dados, eu escrevi uma biblioteca para sincronizar o estado de vários clientes de maneira simples. Você escreve o código como escreveria normalmente usando redux. Apenas adiciona uma linha de código e terá o estado sincronizado entre vários clientes.

Na hora de criar a sua store, ao invés de escrever:

let store = createStore(reducer);

Você escreve:

// frontend
let store = createGlobalStore({ reducer })

// backend
var io = require('socket.io')(server);
require('global-state')(io);

E pronto. Todos os clientes vão sincronizar automaticamente.

Como funciona

Abaixo temos um diagrama mostrando como funciona. Imagine que o cliente 1 já estivesse conectado. O cliente 2 então entre na sala. Ele recebe o estado atual. Quando o cliente 1 dá o “dispatch” de uma ação, essa ação passa pelo servidor (para garantir a ordem) e depois é enviada para todos os clientes. A mesma coisa acontece quando o cliente 2 dá “dispatch” de uma ação.

Exemplo

Vamos botar a mão na massa. Vamos fazer um jogo da velha multiplayer.

A interface não tem muito mistério. Temos um botão de limpar o jogo e quando se clica em um bloco a jogada é feita. Veja o código.

Para deixá-lo multiplayer, basta adicionar a seguinte linha ao criar a store (arquivo src/js/store.js):

// frontend
let store = createGlobalStore({ reducer })

E no nosso servidor express (web.js):

var express = require('express');
var app = express();

app.set('port', (+process.env.PORT || 8000));

var server = require('http').Server(app);
var io = require('socket.io')(server);
require('global-state')(io);

Pronto!

No próximo post vamos ver como diferenciar os clientes e como criar múltiplas salas.