Envoi d'une action depuis un appel asynchrone en Redux

Question

Je convertis mon projet de flux en redux.

Le composant racine avant est très simple Redux:

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

import { Provider } from 'react-redux' 
import AppReducer from './AppReducer' 
import { createStore } from 'redux' 

const store = createStore(AppReducer) 

ReactDOM.render(
    <Provider store={store}> 
    //rest of application goes here 
    </Provider>, 
app); 

En utilisant mapToProps, mapToDispatch Je peux faire face à un comportement au niveau de compoment très bien.

Maintenant, je viens à réponses du serveur, soit des appels asynchrones.

Dans mon implémentation flux J'ai un fichier un appel « Serveur » J'ai mon appel AJAX et une promesse est retourné qui appelle ensuite AppDispatcher.dispatch:

function handleResponse(endpoint) { 
    return function (err, res) { 
    if (res && res.ok) { 
     receiveData(endpoint, res); 
    } 
    }; 
} 

function receiveData(endpoint, responseData) { 
    AppDispatcher.dispatch(
    { 
     type: ActionTypes.SERVER_RESPONSE, 
     endpoint: endpoint, 
     state: "ReponseIsOK", 
     payload: responseData.body 
    } 
); 
    dispatch(endpoint, "CommunicationState.RESPONSE_OK", responseData.body); 
} 

Comment dois-je convertir en redux?

Je dois obtenir en quelque sorte au répartiteur, et j'espérais quelque chose comme ça fonctionnerait:

function receiveData(endpoint, responseData) { 

let store = Provider.getStore(); 
    store.dispatch(
    { 
     type: ActionTypes.SERVER_RESPONSE, 
     endpoint: endpoint, 
     state: "ReponseIsOK", 
     payload: responseData.body 
    } 
); 
} 

J'ai essayé provider.store, provider.context.store et ils semblent aussi Ne pas travailler.

J'ai vraiment juste besoin d'accéder au magasin pour pouvoir déclencher des événements, mais je ne sais pas comment y accéder.

Answer 1

Je suis assez sûr que c'est une situation à utiliser Redux-Thunk, ce qui vous permet d'envoyer des actions de manière asynchrone.

Voici l'explication des docs:

Redux middleware Thunk vous permet d'écrire des créateurs d'action qui renvoient une fonction au lieu d'une action. Le thunk peut être utilisé pour retarder l'envoi d'une action, ou pour l'envoyer seulement si une certaine condition est remplie. La fonction interne reçoit les méthodes de stockage dispatch et getState en tant que paramètres.

Je pense que vous devez d'abord modifier votre création du magasin et passer Redux-thunk comme un middleware et vous pouvez modifier votre fonction receiveData être quelque chose comme ceci:

function receiveData(endpoint, responseData) { 
    return (dispatch, getState) => { 
     // DISPATCH YOUR ACTION WITH RESPONSE DATA 
     // AND ACCESS THE REDUX STORE   
    } 
} 

Answer 2

Vous juste besoin d'enregistrer une référence à la store lorsque vous le créez avec configureStore. Vous pouvez simplement configurer un getter si vous souhaitez accéder à cela de l'extérieur.

Code Pseudo:

var store = configureStore() 

// ...  

export function getStore() { 
    return store 
} 

// ... 

<Provider store={ store } />