Ausführliche Erläuterung von Beispielen von React-Praxisprojekten (3)

React hat fast 70.000 Sterne auf Github und ist derzeit das beliebteste Frontend-Framework. Ich lerne React schon seit einiger Zeit und fange jetzt an, React+Redux zum tatsächlichen Üben zu verwenden!

Das letzte Mal haben wir über die Verwendung von Redux für die Zustandsverwaltung gesprochen. Dieses Mal verwenden wir Redux-Saga, um asynchrone Vorgänge von Redux-Anwendungen zu verwalten

React-Übungsprojekt (1)

React Practical Project (2)

React Practical Project (3)

- Schauen wir uns zunächst die vom angemeldeten Reducer initiierten Aktionen an

export const auth = (state = initialState, action = {}) => {
  switch (action.type) {
    case LOGIN_USER:
      return state.merge({
        'user': action.data,
        'error': null,
        'token': null,
      });
    case LOGIN_USER_SUCCESS:
      return state.merge({
        'token': action.data,
        'error': null
      });
    case LOGIN_USER_FAILURE:
      return state.merge({
        'token': null,
        'error': action.data
      });
    default:
      return state
  }
};

Sagas. Entscheiden Sie dann, was auf der Grundlage dieser Aktion zu tun ist: Initiieren Sie einen asynchronen Aufruf (z. B. eine Ajax-Anfrage), initiieren Sie andere Aktionen für den Store oder rufen Sie sogar andere Sagas auf.

Die spezifische Anmeldefunktion besteht darin, dass, wenn wir auf das Anmelde-Popup-Fenster klicken, eine LOGIN_USER-Aktion ausgegeben wird, die LOGIN_USER-Aktion überwacht, eine Ajax-Anfrage im Hintergrund initiiert und entscheidet um LOGIN_USER_SUCCESS basierend auf dem Ergebnis zu initiieren oder LOGIN_USER_FAILUREAktion

Als nächstes implementieren wir diesen Prozess

• Erstellen Sie die Saga-Middleware und stellen Sie eine Verbindung zum Redux-Store her

redux-sagaAbhängigkeiten in package.json hinzufügen

"redux-saga": "^0.15.4"

Ändern src/redux/store/store.js

/**
 * Created by Yuicon on 2017/6/27.
 */
import {createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import reducer from '../reducer/reducer';

import rootSaga from '../sagas/sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

Redux-Saga verwendet die Generatorfunktion, um

• Listen-Aktion

Src/redux/sagas/sagas.js erstellen

/**
 * Created by Yuicon on 2017/6/28.
 */
import { takeLatest } from 'redux-saga/effects';
import {registerUserAsync, loginUserAsync} from './users';
import {REGISTER_USER, LOGIN_USER} from '../action/users';

export default function* rootSaga() {
  yield [
    takeLatest(REGISTER_USER, registerUserAsync),
    takeLatest(LOGIN_USER, loginUserAsync)
  ];
}

Wir können sehen, dass es in rootSaga überwacht wird. Die beiden Aktionen sind Anmeldung und Registrierung.

Im obigen Beispiel erlaubt takeLatest nur die Ausführung einer loginUserAsync-Aufgabe. Und diese Aufgabe ist die letzte, die gestartet wird. Wenn bereits eine Aufgabe ausgeführt wird, wird die vorherige Aufgabe automatisch abgebrochen.

Wenn wir zulassen, dass mehrere loginUserAsync-Instanzen gleichzeitig gestartet werden. Zu einem bestimmten Zeitpunkt können wir eine neue loginUserAsync-Aufgabe starten, auch wenn eine oder mehrere vorherige loginUserAsync-Aufgaben noch nicht abgeschlossen sind. Wir können die Hilfsfunktion takeEvery verwenden.

• Eine Ajax-Anfrage initiieren

• Daten zum Store-Status abrufen

selectors.js

/**
 * Created by Yuicon on 2017/6/28.
 */
export const getAuth = state => state.auth;

• api

api.js

/**
 * Created by Yuicon on 2017/7/4.
 * 
 */

/**
 * 这是我自己的后台服务器，用 Java 实现
 * 项目地址：
 * 文档：http://139.224.135.86:8080/swagger-ui.html#/
 */
const getURL = (url) => `http://139.224.135.86:8080/${url}`;

export const login = (user) => {
  return fetch(getURL("auth/login"), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  }).then(response => response.json())
    .then(json => {
      return json;
    })
    .catch(ex => console.log('parsing failed', ex));
};

• src/redux/ erstellen sagas/users.js

/**
 * Created by Yuicon on 2017/6/30.
 */
import {select, put, call} from 'redux-saga/effects';
import {getAuth, getUsers} from './selectors';
import {loginSuccessAction, loginFailureAction, registerSuccessAction, registerFailureAction} from '../action/users';
import {login, register} from './api';
import 'whatwg-fetch';

export function* loginUserAsync() {
  // 获取Store state 上的数据
  const auth = yield select(getAuth);
  const user = auth.get('user');
  // 发起 ajax 请求
  const json = yield call(login.bind(this, user), 'login');
  if (json.success) {
    localStorage.setItem('token', json.data);
    // 发起 loginSuccessAction
    yield put(loginSuccessAction(json.data));
  } else {
    // 发起 loginFailureAction
    yield put(loginFailureAction(json.error));
  }
}

Wird verwendet, um Daten zum Store-Status zu erhalten select(selector, ...args)
Eine Aktion zum Store initiierenput(action)
Rufen Sie fn The auf Die Funktion verwendet Argumente als Parameter. Wenn das Ergebnis ein Promise ist, hält die Middleware an, bis das Promise aufgelöst ist, und der Generator setzt die Ausführung nach der Auflösung fort. Oder bis das Versprechen abgelehnt wird. In diesem Fall wird ein Fehler im Generator ausgegeben. call(fn, ...args)

Redux-saga detaillierte API-Dokumentation

• Fazit

Ich verwende Redux-Thunk bei der Arbeit, Redux-Thunk ist relativ einfacher zu implementieren und zu warten. Bei komplexen Vorgängen, insbesondere bei komplexen asynchronen Vorgängen, bietet Redux-Saga jedoch weitere Vorteile. An dieser Stelle haben wir ein Einführungs-Tutorial für Redux-Saga abgeschlossen. Es gibt viele wunderbare Dinge über Redux-Saga,

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen von React-Praxisprojekten (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!