Wie man eine AJAX-Anfrage in redux macht

Sollten Sie die Verwendung von Asynchronen Aktionen beschrieben, die in Redux-Dokumentation

Hier ein Beispiel reducer für async-action.

const booksReducer = (state = {}, action) => {
  switch (action.type) {
    case 'RESOLVED_GET_BOOK':
      return action.data;
    default:
      return state;
  }
};

export default booksReducer;

und dann schaffen Sie die Asynchrone Aktion.

export const getBook() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(json => dispatch(resolvedGetBook(json)))
}

export const resolvedGetBook(data) {
  return {
    type: 'RESOLVED_GET_BOOK',
    data: data
  }
}

Mehrere Hinweise:

• Wir wieder Versprechen (statt Objekt) in Aktion mit redux-thunk-middleware.
• Nicht die jQuery-ajax-Bibliothek. Verwenden Sie eine andere Bibliothek, die speziell für tun (z.B. fetch()). Ich benutze axios http-client.
• Erinnern, in der redux verwenden Sie nur die Reine Funktion im Druckminderer. Machen Sie nicht ajax-Aufruf innerhalb reducer.
• Lesen Sie die komplette Anleitung von redux docs.

InformationsquelleAutor der Antwort Kiddo

Möchten Sie vielleicht separate Bedenken, zu halten Aktion Machern von "pure".

Lösung; einige schreiben middleware. Nehmen Sie dies zum Beispiel (superagent).

import Request from 'superagent';

const successHandler = (store,action,data) => {

    const options = action.agent;
    const dispatchObject = {};
    dispatchObject.type = action.type + '_SUCCESS';
    dispatchObject[options.resourceName || 'data'] = data;
    store.dispatch(dispatchObject);
};

const errorHandler = (store,action,err) => {

    store.dispatch({
        type: action.type + '_ERROR',
        error: err
    });
};

const request = (store,action) => {

    const options = action.agent;
    const { user } = store.getState().auth;
    let method = Request[options.method];

    method = method.call(undefined, options.url)

    if (user && user.get('token')) {
        //This example uses jwt token
        method = method.set('Authorization', 'Bearer ' + user.get('token'));
    }

    method.send(options.params)
    .end( (err,response) => {
        if (err) {
            return errorHandler(store,action,err);
        }
        successHandler(store,action,response.body);
    });
};

export const reduxAgentMiddleware = store => next => action => {

    const { agent } = action;

    if (agent) {
        request(store, action);
    }
    return next(action);
};

Stellen alles in ein Modul.

Nun, Sie könnten ein action-Schöpfer namens 'auth':

export const auth = (username,password) => {

    return {
        type: 'AUTHENTICATE',
        agent: {
            url: '/auth',
            method: 'post',
            resourceName: 'user',
            params: {
                username,
                password
            }
        }
    };
};

Die Eigenschaft "agent" wird aufgegriffen, indem die middleware sendet die konstruierte Anfrage über das Netzwerk, dann löst das ankommende Ergebnis zu deinem Shop.

Ihre reducer all diese Griffe, nach dem definieren der Haken:

import { Record } from 'immutable';

const initialState = Record({
    user: null,
    error: null
})();

export default function auth(state = initialState, action) {

    switch (action.type) {

        case 'AUTHENTICATE':

            return state;

        case 'AUTHENTICATE_SUCCESS':

            return state.merge({ user: action.user, error: null });

        case 'AUTHENTICATE_ERROR':

            return state.merge({ user: null, error: action.error });

        default:

            return state;
    }
};

Nun Spritzen Sie alles in Ihrer view-Logik. Ich bin mit reagieren als ein Beispiel.

import React from 'react';
import ReactDOM from 'react-dom';

/* Redux + React utils */
import { createStore, applyMiddleware, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';

//thunk is needed for returning functions instead 
//of plain objects in your actions.
import thunkMiddleware from 'redux-thunk';

//the logger middleware is useful for inspecting data flow
import createLogger from 'redux-logger';

//Here, your new vital middleware is imported
import { myNetMiddleware } from '<your written middleware>';

/* vanilla index component */
import _Index from './components';

/* Redux reducers */
import reducers from './reducers';

/* Redux actions*/
import actionCreators from './actions/auth';


/* create store */
const store = createStore(
    reducers,
    applyMiddleware(
        thunkMiddleware,
        myNetMiddleware
    )
);

/* Taint that component with store and actions */
/* If all goes well props should have 'auth', after we are done */
const Index = connect( (state) => {

    const { auth } = state;

    return {
        auth
    };
}, (dispatch) => {

    return bindActionCreators(actionCreators, dispatch);
})(_Index);

const provider = (
    <Provider store={store}>
        <Index />
    </Provider>
);

const entryElement = document.getElementById('app');
ReactDOM.render(provider, entryElement);

All dies bedeutet, dass Sie bereits eine pipeline mit webpack -, rollup-oder etwas, transpile von es2015 und reagieren, vanilla js.

InformationsquelleAutor der Antwort Thomas E