Question

这是我的用例：

我有两个不同的应用程序，反应客户端应用程序和具有REST API的快速/节点后端服务器应用程序。我希望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中间件是否提供这些功能..

谢谢，Rajesh

Answer 1

我认为你所寻找的是像react-redux这样的东西。这允许您连接组件以依赖于状态树的一部分，并且只要状态改变就会更新（只要您应用新的引用）。见下文：

<强> UserListContainer.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);

<强> UserList.jsx

import React from 'react';

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

<强> UserActions.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动作，然后列出来自套接字的消息。当它收到一条消息时，它将从其类型中调出另一个动作基础，其中包含相应的数据，这些数据将被记录在reducer中并添加到状态。 *注意：请勿改变状态，否则组件在连接时不会反映更改。

然后我们使用react-redux连接容器组件，react-redux将状态和操作应用于props。因此，现在users状态发生更改时，它会将其发送到容器组件，然后发送到UserList组件进行渲染。

这是一种天真的方法，但我相信它说明了解决方案，让您走上正确的轨道！

祝你好运，希望这有所帮助！

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

1 个答案: