Как общаться между реагирующим сервисом и компонентом?

Question

Я создал файл util .js, который вызывает остальные API, и мне нужно установить связь между этим утилитой (не компонентом) и другими компонентами.

Например, при входе в систему, если он не может вызвать событие, которое компонент Login будет ловить и действовать соответственно.

Не уверен, что это правильный подход (я новичок в реакции), как это можно сделать?

Answer 1

Это может быть выполнено с обещанием или обратным вызовом.

С помощью обратного вызова вы просто передаете функцию, которая будет выполнена после завершения вызова API, и передаете необходимые данные для обработки обратного вызова (например, API возвратил какие-либо данные?, Запрос API не прошел?)

Реализация обратного вызова:

function utilFunction(param1, param2, callback) {
 // Submit to API...
 callback();
}

utilFunction(param1, param2, () => {
  // Data to run on callback.
});

Обещание очень похоже на функцию обратного вызова в том смысле, что вы вызываете либо разрешение / отклонение при успехе / ошибке, но вы получаете дополнительное преимущество использования API then / catch или async / await, если вы используете транспортер .

Выполнение обещания:

fuction utilFunction(param1, param2) {
  return new Promise(function(resolve, reject) {
    try {
      // API request...
      resolve();
    } catch (err) {
      // API error...
      reject();
    }
  });
}

utilFunction
  .then(() => {
    // Success
  })
  .catch() => {
    // Error
  })

При использовании async / await:

try {
  await utilFunction();
} catch (err) {
  // Handle error..
}

Answer 2

Я реализовал решение Flux (несмотря на то, что может быть достаточно редукционной аппроксимации, и один магазин - который является службой отдыха - может выполнить работу)

Диспетчер:

 import { Dispatcher } from 'flux';

export default new Dispatcher();

RestService (store):

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from '../App';

import {EventEmitter} from 'events';
import dispatcher from '../Dispatcher';
import * as Actions from "../actions/Actions";

const baseUrl = 'http:/.../WebServices/api';

class ApiService extends EventEmitter {

    constructor() {
        super();

        this.updateStatus = this.updateStatus.bind(this);

        this.state = {
            loginFailed: false
        }
    }

    getLoginStatus() {
        return this.state.loginFailed;
    }

    updateStatus(status) {
        //this.setState({loginFailed: true});
        this.state.loginFailed = status;
    }

    // module.exports = {

        /*export function*/ login(userName, password) {
            fetch(baseUrl + '/SessionManager/login?userName='
                + userName + '&password=' + password,
                {
                    //method: 'GET',
                    //credentials: "same-origin",
                    //mode: "no-cors",
                    //headers: headers
                    //'Content-Type': 'application/json'
                }
            ).then(
                (response) => {
                    localStorage.setItem('Response', JSON.stringify(response))
                    //console.log("Headers ======>", JSON.stringify(response.headers));

                    // Inspect the headers in the response
                    response.headers.forEach(console.log);
                    // OR you can do this
                    for (let entry of response.headers.entries()) {
                        console.log(entry);
                    }

                    // let sid = getSessionCookie(); //document.cookie.match('sid=([^;]*)');
                    // console.log("Session Id: ", sid);
                    // localStorage.setItem('session', sid)

                    // let headers = response.headers.get('Set-Cookie')
                    // console.log("Headers: ", headers);
                    // localStorage.setItem('headers', headers)

                    if (response.status < 200 || response.status > 300) {
                        // console.log('Looks like there was a problem. Status Code: ' + response.status);
                        // this.state.showError = true;
                        // this.state.errorMessage = 'Please enter a valid credentials.';

                        //this.setState({loginFailed: true});
                        this.updateStatus(true);
                        this.emit("statusChanged", response);

                        return;
                    } else {
                        //window.location.href = '/main';
                        ReactDOM.render(<App user={userName}/>,
                            document.getElementById('root'));
                    }

                    // Examine the text in the response
                    // response.json().then(function(data) {
                    //     console.log(data);
                    // });
                }
            ).catch((error) => {
                console.error(error);
            });
        }

        /*export function*/ getProjectDetails() {
            //let params = this.getSession();
            //console.log('Params....', params);


            fetch(baseUrl + '/ProjectManager/getProjectDetails',
                {
                    //   //credentials: "include",
                    //   //credentials: "same-origin",
                    //   //crossdomain: true,
                    //   //mode: 'no-cors',
                    //headers: headers
                }
            )
                .then(res => res.json())
                .then((data) => {
                    this.setState({projectsDetails: data})
                    console.log(data);
                })
                .catch(console.log);
        }
    // }

    handleActions(action) {
        switch(action.type) {
            case "LOGIN": {
                this.login(action.user, action.password);
                //this.emit("change");
            }
            // case "LOGIN_FAILURE": {
            //     this.setState({loginFailed: true});
            //     this.emit("change");
            // }
        }
    }
}

// const service = new ApiService();
// // Register dispatcher
// dispatcher.register(service.handleActions.bind(service));
// // Expose dispatcher globally
// window.dispatcher = dispatcher;

export default ApiService;

Действия:

import dispatcher from '../Dispatcher';

export function login(user, password) {

    dispatcher.dispatch({
        type: "LOGIN",
        user: user,
        password: password
    })

}

Компонент входа:

import React, { Component } from 'react';
import {Button, Form, TextInput} from 'carbon-components-react';
import './Login.css';
//import * as service from  '../services/RestService.js';
import ApiService from '../stores/RestService.js';
import ReactDOM from "react-dom";
import App from "../App";
import * as Actions from "../actions/Actions";
import dispatcher from "../Dispatcher";


const apiService = new ApiService();

// Register dispatcher
dispatcher.register(apiService.handleActions.bind(apiService));
// Expose dispatcher globally
window.dispatcher = dispatcher;


class Login extends Component {

    //errorMessage;
    service;
    getLoginStatus;

    constructor(props) {
        super(props);
        this.getLoginStatus = this.getLoginStatus.bind(this);

        //this.service = new ApiService();
        this.state = {
            userName: '',
            password: '',
            // errorMessage: '',
            //showError: false,
            loginFailed: false
        }

        apiService.on('statusChanged', this.getLoginStatus);
    }

    componentWillMount() {
        apiService.on('change', this.getLoginStatus);
    }

    componentWillUnmount() {
        apiService.removeListener("change", this.getLoginStatus);
    }

    getLoginStatus() {
        this.setState({
            loginFailed: apiService.getLoginStatus()
        });
    }

    handleUserChange(e) {
        this.setState({ userName: e.target.value });
    }

    handlePasswordChange(e) {
        this.setState({ password: e.target.value });
    }

    handleSubmit = (event) => {
        event.preventDefault();

        //this.service.login(this.state.userName, this.state.password);
        Actions.login(this.state.userName, this.state.password);
    }


    render() {
        const {loginFailed} = this.state;
        return (
            <div className="App">
                <header className="App-header">

                    <table width="100%" className="Toolbar1">
                        <tbody>
                        <tr>
                            <td width="90%">
                                <h2>My App</h2>
                            </td>
                            <td>
                                <Button className="button">
                                    Help
                                </Button>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </header>

                <body classname="App-body">
                    <table width="25%" align="center" className="bordered spaced centered">
                        <tbody>
                        <tr>
                            <td width="75%">Welcome to ...</td>
                            <td>Ver: 1.0.0</td>
                        </tr>
                        <tr>
                            <td colSpan="2">
                                <Form onSubmit={this.handleSubmit}>
                                        <TextInput
                                            className="wide"
                                            id="txtUser"
                                            labelText=""
                                            placeholder="User Name"
                                            required
                                            onChange={ this.handleUserChange.bind(this) }
                                        />
                                        <br/>
                                        <TextInput
                                            className="wide"
                                            id="txtPassword"
                                            type="password"
                                            required
                                            labelText=""
                                            placeholder="Password"
                                            // pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
                                            // {...InvalidPasswordProps}
                                            required
                                            onChange={ this.handlePasswordChange.bind(this)}
                                        />
                                        <br/>
                                        <Button type="submit" className="button wide"
                                                //onSubmit={this.handleSubmit}
                                                //onClick={this.handleClick}
                                        >
                                            Login
                                        </Button>
                                    <br/><br/>
                                </Form>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    {/*<spane style={{color: 'red'}}><b>Please enter valid credentials.</b></spane>*/}
                    <div style={{color: 'red'}} className="alert alert-danger centered2">
                        { loginFailed ? <span color="Red"><strong>Error!</strong> Please enter valid credentials.</span> : null }
                    </div>
                </body>

                <footer>

                </footer>

            </div>
        );
    }
}

export default Login;