简体   繁体   English

在服务器和客户端上使用 Redux

[英]Using Redux on the Server and on the Client

Lately, I've been building Universal web apps using two redux stores: one on the client and one on the server.最近,我一直在使用两个 redux 存储构建通用 Web 应用程序:一个在客户端,一个在服务器上。 Redux seems like a great tool for managing state data. Redux 似乎是管理状态数据的好工具。 Is it ok to use Redux for stuff outside of React?可以将 Redux 用于 React 之外的东西吗? Could you use Redux in a command line app for instance?例如,您可以在命令行应用程序中使用 Redux 吗?

I feel like this client store and server store approach breaks the "single source of truth rule", but it feels so nice and so far has worked well.我觉得这种客户端存储和服务器存储方法打破了“单一事实来源规则”,但感觉很好,到目前为止效果很好。 What I've found is I can reuse about 80% of the reducers to compose both stores.我发现我可以重用大约 80% 的 reducer 来组成两个 store。 State on the server is typically a collection where state on the client can be a single object.服务器上的状态通常是一个集合,其中客户端上的状态可以是单个对象。

For example: Let's say you have client state for a chat app:例如:假设您有一个聊天应用程序的客户端状态

{
    user: 'mike@aol.com',
    room: {
       name: 'sports',
       users: [ ... ],
       messages: [ ... ]
    }
}

The server state is similar and can use similar reducers, but it uses collections instead of objects.服务器状态类似,可以使用类似的reducer,但它使用集合而不是对象。

{
    connectedUsers: ['mike@aol.com', ... ],
    rooms: [
      {
          name: 'sports',
          users: [ ... ],
          messages: [ ... ]
      },
      { ... },
      { ... }
    ]
}

Creating both state trees reuse a lot of the same reducers.创建两个状态树重用了许多相同的减速器。 This approach has also allowed me to send actions to the server and respond with actions from the client.这种方法还允许我将动作发送到服务器并响应来自客户端的动作。 It is also not very hard to use the server store to generate state client stores when there are new connections.当有新连接时,使用服务器存储生成状态客户端存储也不是很困难。

My Question我的问题

I've had fun with this approach to a Universal App.我对这种通用应用程序的方法很感兴趣。 Does this break any of the rules?这是否违反任何规则? Can you have a client store and a server store?您可以拥有一个客户端商店和一个服务器商店吗? It is not very hard to use the server store to generate the initial.使用服务器存储生成初始值并不难。

Is anyone else working Universal apps this way?还有其他人以这种方式使用通用应用程序吗?

The main problem that occurs to me with this approach is that the redux store on the server will stay in memory on the node instance.我用这种方法遇到的主要问题是服务器上的 redux 存储将保留在节点实例的内存中。 This would be a problem when you go to production and want to scale up from a single server instance.当您进入生产环境并希望从单个服务器实例向上扩展时,这将是一个问题。

For example, if you deploy to Heroku, when you increase the number of dynos you're increasing the number of node processes.例如,如果您部署到 Heroku,当您增加 dyno 的数量时,您就会增加节点进程的数量。 Each node process will have it's own copy of the redux state.每个节点进程都有自己的 redux 状态副本。 So your client might get one process on the first request, and a different one with different data on the next request.因此,您的客户端可能会在第一个请求中获得一个进程,而在下一个请求中获得另一个具有不同数据的进程。

it is probably a bit late response, but anyway.这可能有点晚了,但无论如何。 I've made an experiment, where I was implementing a multi-browser multiplayer tic-tac-toe game.我做了一个实验,我正在实现一个多浏览器多人井字游戏。 Where Redux was a main state distributor on the back-end. Redux 是后端的主要状态分发器。

The experiment ended up in a series of articles, which in a pretty detailed way describe the hows and whys of using Redux on the backend, independently on whether you prefer to use Redux or classical React state on the front-end.该实验最终形成了一系列文章,它们以非常详细的方式描述了在后端使用 Redux 的方法和原因,而这与您更喜欢在前端使用 Redux 还是经典的 React 状态无关。

  1. Server-side Redux.服务器端 Redux。 Part I. The Redux.第一部分。 Redux。
  2. Server-side Redux.服务器端 Redux。 Part II.第二部分。 The Design.设计。
  3. Server-side Redux.服务器端 Redux。 Part III.第三部分。 The Code.守则。

Feel free to shoot me a message if you will have any questions.如果您有任何问题,请随时给我留言。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM