La réponse courte : semble totalement approche raisonnable de l'asynchronie de problème pour moi. Avec quelques mises en garde.

j'ai eu une pensée très semblable en travaillant sur un nouveau projet que nous venons de commencer à mon travail. J'ai été un grand fan du système élégant de vanilla Redux pour la mise à jour du magasin et la remise en ordre des composants d'une manière qui reste en dehors des tripes D'un arbre de composants réagir. Ça m'a semblé bizarre de m'accrocher à cette élégante dispatch mécanisme pour gérer l'asynchronie.

j'ai fini par aller avec une approche vraiment similaire à ce que vous avez là dans une bibliothèque que j'ai fait sortir de notre projet, que nous avons appelé react-redux-controller .

j'ai fini par ne pas aller avec l'approche exacte que vous avez ci-dessus pour quelques raisons:

1. de la façon dont vous l'avez écrit, ces fonctions d'expédition n'ont pas accès au magasin. Vous pouvez en quelque sorte contourner cela en faisant passer vos composants UI dans toutes les informations dont la fonction dispatching a besoin. Mais je dirais que cela jumelle ces composantes D'assurance-chômage à la logique de répartition inutilement. Et plus problématiquement, il n'y a aucun moyen évident pour la fonction dispatching d'accéder à l'état mis à jour dans les continuations asynchrones.
2. les fonctions de dispatching ont accès à dispatch lui-même via lexical scope. Cela limite les options de reconfiguration une fois que La déclaration connect est hors de contrôle -- et ça a l'air assez compliqué avec juste cette méthode update . Donc vous avez besoin d'un système pour vous permettre de composer ces fonctions de répartiteur si vous les divisez en modules séparés.

dans l'ensemble, vous devez installer un système pour permettre à dispatch et au magasin d'être injecté dans vos fonctions d'expédition, avec les paramètres de l'événement. Je sais de trois approches raisonnables à cette injection de dépendance:

• redux-thunk fait cela d'une manière fonctionnelle, en les passant dans vos thunks (ce qui les rend pas exactement thunks à tous, selon les définitions dôme). Je n'ai pas travaillé avec les autres approches middleware dispatch , mais je suppose qu'elles sont essentiellement les mêmes.
• réagissent-redux-contrôleur de fait avec une coroutine. En prime, il vous donne également accès à la "sélecteurs", qui sont les les fonctions que vous avez peut-être passées comme premier argument à connect , plutôt que d'avoir à travailler directement avec le stock brut, normalisé.
• vous pouvez également le faire de la manière orientée objet en les injectant dans le contexte this , à travers une variété de mécanismes possibles.

mise à Jour

Il me semble qu'une partie de cette énigme est une limitation de réagissent-redux . Le premier argument de connect obtient un état instantané, mais pas d'expédition. Le deuxième argument obtient expédition, mais pas l'état. Aucun des arguments n'obtient un thunk qui se ferme sur l'état actuel, pour pouvoir voir l'état mis à jour au moment d'une continuation/callback.

le but D'Abramov-et de tout le monde idéalement - est simplement de encapsuler la complexité (et les appels asynchrones) à l'endroit où il est le plus approprié .

Où est le meilleur endroit pour faire ça dans le flux de données standard de Redux? Pourquoi pas:

• réducteurs ? Aucun moyen. Ils doivent être des fonctions pures sans effets secondaires. La mise à jour du magasin est une affaire sérieuse et compliquée. Ne la contaminez pas.
• Bête De Voir Les Composants? Certainement Pas. Ils ont une seule préoccupation: la présentation et l'interaction avec les utilisateurs, et doivent être aussi simples que possible.
• Conteneur De Composants? Possible, mais sous-optimal. Cela a du sens en ce que le conteneur est un endroit où nous encapsulons une certaine complexité liée à la vue et interagissons avec le magasin, mais:
  • les conteneurs doivent être plus complexes que muets composants, mais c'est toujours une seule responsabilité: fournir des fixations entre la vue et l'état/magasin. Votre logique asynchrone est une autre préoccupation.
  • en le plaçant dans un conteneur, vous verrouilleriez votre logique asynchrone dans un contexte unique, pour une vue/route unique. Mauvaise idée. Idéalement, tout est réutilisable et totalement découplé.
• S ome other Service Module? mauvaise idée: vous auriez besoin d'injecter accès au magasin, qui est un cauchemar en termes de maintenabilité/testabilité. Il est préférable d'utiliser le grain de Redux et d'accéder au magasin uniquement en utilisant les API/modèles fournis.
• les Actions et les intermédiaires qui les interprètent? pourquoi pas?! Pour commencer, c'est la seule option majeure nous ont quitté. :- ) Plus logiquement, le système d'action est une logique d'exécution découplée que vous pouvez utiliser de n'importe où. Il a accès au magasin et peut envoyer plus d'actions. Il a une seule responsabilité qui est d'organiser le flux de contrôle et de données autour de l'application, et la plupart des async s'inscrit directement dans cela.
  • Qu'en est-il des créateurs D'Action? Pourquoi ne pas simplement faire async là-dedans, au lieu de dans les actions elles-mêmes, et dans Middleware?
    • tout d'abord et surtout, les créateurs n'ont pas accès au magasin, comme le fait middleware. Cela signifie que vous ne pouvez pas envoyer de nouvelles actions contingentes, ne peut pas lire à partir du magasin pour composer votre asynchrone, etc.
    • ainsi, gardez la complexité dans un endroit qui est complexe de nécessité, et garder tout le reste simple. Les créateurs peuvent alors être simples, des fonctions relativement pures qui sont faciles à tester.

pour répondre à la question posée au début:

pourquoi le composant container ne peut-il pas appeler L'API async, puis lancer les actions?

gardez à l'esprit que ces docs sont pour Redux, pas Redux plus React. Redux stores hooked up to React components peut faire exactement ce que vous dites, mais un simple magasin Jane Redux sans middleware n'accepte pas les arguments à dispatch à l'exception de la plaine de vieux objets.

sans middleware, vous pourriez bien sûr encore faire

const store = createStore(reducer);
MyAPI.doThing().then(resp => store.dispatch(...));

Mais c'est un cas similaire où l'asynchronie est enveloppé autour de Redux plutôt que manipulé par Redux. Ainsi, middleware permet l'asynchronie en modifiant ce qui peut être passé directement à dispatch .

cela dit, l'esprit de votre suggestion est, Je pense que, valide. Il y a certainement d'autres façons de gérer l'asynchronie dans une application Redux + React.

l'un des avantages d'utiliser middleware est que vous pouvez continuer à utiliser les créateurs d'action comme d'habitude sans vous soucier de savoir exactement comment ils sont connectés. Par exemple, en utilisant redux-thunk , le code que vous avez écrit ressemblerait beaucoup à

function updateThing() {
  return dispatch => {
    dispatch({
      type: ActionTypes.STARTED_UPDATING
    });
    AsyncApi.getFieldValue()
      .then(result => dispatch({
        type: ActionTypes.UPDATED,
        payload: result
      }));
  }
}

const ConnectedApp = connect(
  (state) => { ...state },
  { update: updateThing }
)(App);

qui ne semble pas si différent de l'original - il est juste un peu mélangé - et connect ne sait pas que updateThing est (ou doit être) asynchrone.

Si vous aussi vous voulez prendre en charge promesses , observables , sagas , ou fou personnalisé et très déclaratif action créateurs, puis Redux pouvez le faire en changeant juste ce que vous passez à dispatch (aka, ce que vous êtes de retour de l'action des créateurs). Pas d'embrouille avec la réaction composants (ou appels connect ) nécessaires.

OK, commençons à voir comment fonctionne middleware en premier, qui répond tout à fait à la question, c'est le code source applyMiddleWare fonction dans Redux:

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function (reducer, preloadedState, enhancer) {
      var store = createStore(reducer, preloadedState, enhancer);
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch(action) {
          return _dispatch(action);
        }
      };
      chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = compose.apply(undefined, chain)(store.dispatch);

      return _extends({}, store, {
        dispatch: _dispatch
      });
    };
  };
}

Regardez cette partie, voyez comment notre expédition devient une fonction .

  ...
  getState: store.getState,
  dispatch: function dispatch(action) {
  return _dispatch(action);
}

• notez que chaque middleware recevra les fonctions dispatch et getState comme arguments nommés.

OK, voici comment Redux-thunk comme l'un des middlewares les plus utilisés pour Redux se présenter:

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

comme vous le voyez, il retournera une fonction à la place d'une action, signifie que vous pouvez attendre et l'appeler quand vous voulez car c'est une fonction...

alors qu'est-ce que c'est que ce truc? C'est ainsi Qu'il est introduit dans Wikipedia:

dans la programmation informatique, un thunk est un sous-programme utilisé pour injecter calcul supplémentaire dans un autre sous-programme. Les moufettes sont principalement utilisé pour retarder une calcul jusqu'à ce qu'il est nécessaire, ou à insérer les opérations au début ou à la fin de l'autre sous-routine. Ils ont une variété d'autres applications de génération de code de compilateur et dans programmation modulaire.

le terme provient d'un dérivé joculaire de"penser".

un thunk est une fonction qui enveloppe une expression pour retarder son évaluation.

//calculation of 1 + 2 is immediate 
//x === 3 
let x = 1 + 2;

//calculation of 1 + 2 is delayed 
//foo can be called later to perform the calculation 
//foo is a thunk! 
let foo = () => 1 + 2;

donc voir comment le concept est facile et comment il peut vous aider à gérer vos actions asynchrones...

C'est quelque chose que vous pouvez vivre sans, mais rappelez-vous que dans la programmation, il y a toujours de meilleures façons de faire les choses...

pour utiliser Redux-saga est le meilleur middleware dans la mise en œuvre de React-redux.

Ex: stocker.js

  import createSagaMiddleware from 'redux-saga';
  import { createStore, applyMiddleware } from 'redux';
  import allReducer from '../reducer/allReducer';
  import rootSaga from '../saga';

  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
     allReducer,
     applyMiddleware(sagaMiddleware)
   )

   sagaMiddleware.run(rootSaga);

 export default store;

et ensuite saga.js

import {takeLatest,delay} from 'redux-saga';
import {call, put, take, select} from 'redux-saga/effects';
import { push } from 'react-router-redux';
import data from './data.json';

export function* updateLesson(){
   try{
       yield put({type:'INITIAL_DATA',payload:data}) // initial data from json
       yield* takeLatest('UPDATE_DETAIL',updateDetail) // listen to your action.js 
   }
   catch(e){
      console.log("error",e)
     }
  }

export function* updateDetail(action) {
  try{
       //To write store update details
   }  
    catch(e){
       console.log("error",e)
    } 
 }

export default function* rootSaga(){
    yield [
        updateLesson()
       ]
    }

et ensuite action.js

 export default function updateFruit(props,fruit) {
    return (
       {
         type:"UPDATE_DETAIL",
         payload:fruit,
         props:props
       }
     )
  }

et puis réducteur.js

import {combineReducers} from 'redux';

const fetchInitialData = (state=[],action) => {
    switch(action.type){
      case "INITIAL_DATA":
          return ({type:action.type, payload:action.payload});
          break;
      }
     return state;
  }
 const updateDetailsData = (state=[],action) => {
    switch(action.type){
      case "INITIAL_DATA":
          return ({type:action.type, payload:action.payload});
          break;
      }
     return state;
  }
const allReducers =combineReducers({
   data:fetchInitialData,
   updateDetailsData
 })
export default allReducers; 

et puis main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/components/App.jsx';
import {Provider} from 'react-redux';
import store from './app/store';
import createRoutes from './app/routes';

const initialState = {};
const store = configureStore(initialState, browserHistory);

ReactDOM.render(
       <Provider store={store}>
          <App />  /*is your Component*/
       </Provider>, 
document.getElementById('app'));

essayez ceci.. fonctionne