sockets - 用于计时器操作的 React/Redux 和 Websockets

Question

这是我的用例:

我有两个不同的应用程序， react 客户端应用程序和具有 REST API 的 express/node 后端服务器应用程序。我希望 react 客户端应用程序刷新组件状态，每次服务器在套接字上发送一个事件，该事件在服务器端发生数据更改。

我已经看到了执行此操作的 websocket 示例(http://www.thegreatcodeadventure.com/real-time-react-with-socket-io-building-a-pair-programming-app/)，但在这种情况下，客户端和服务器组件位于同一个应用程序中。当您为客户端和服务器组件使用不同的应用程序时如何执行此操作。

如果数据有任何变化，我是否应该使用 Timer ( https://github.com/reactjs/react-timer-mixin ) 从客户端调用服务器休息端点并刷新客户端上的组件。还是 redux 中间件提供这些功能..

谢谢，拉杰什

Answer 1

我认为您正在寻找的是 react-redux 之类的东西。这允许您连接组件以依赖于状态树的一部分，并且在状态更改时会更新(只要您正在应用新的引用)。见下文:

用户列表容器.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as UserActions from '../actions/userActions';
import UserList from '../components/UserList';

class UserListContainer {
  // Subscribe to changes when the component mounts
  componentDidMount() {
    // This function 
    this.props.UserActions.subscribe();
  }

  render() {
    return <UserList {...props} />
  }
}

// Add users to props (this.props.users)
const mapStateToProps = (state) => ({
  users: state.users,
});

// Add actions to props
const mapDispatchToProps = () => ({
  UserActions
});

// Connect the component so that it has access to the store
// and dispatch functions (Higher order component)
export default connect(mapStateToProps)(UserListContainer);

用户列表.jsx

import React from 'react';

export default ({ users }) => (
  <ul>
    {
      users.map((user) => (
        <li key={user.id}>{user.fullname}</li>
      ));
    }
  </ul>
);

用户操作.js

const socket = new WebSocket("ws://www.example.com/socketserver");

// An action creator that is returns a function to a dispatch is a thunk
// See: redux-thunk
export const subscribe = () => (dispatch) => {
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'user add') {
      // Dispatch ADD_USER to be caught in the reducer
      dispatch({
        type: 'ADD_USER',
        payload: {
         data.user
        }
      });
    }
    // Other types to change state...
  };
};

解释

本质上发生的事情是，当容器组件挂载时，它将调度 subscribe然后将列出来自套接字的消息的操作。当它收到一条消息时，它将分派(dispatch)另一个与其类型不同的 Action 基础，并带有相应的数据，这些数据将被reducer捕获并添加到状态中。 *注意:不要改变状态，否则组件在连接时不会反射(reflect)更改。

然后我们使用 react-redux 连接容器组件，它将状态和 Action 应用于 props。所以现在任何时候 users状态更改它将发送到容器组件并向下发送到 UserList 组件进行渲染。

这是一种幼稚的方法，但我相信它说明了解决方案并让您走上正轨!

祝你好运，希望这有帮助!