Avantages/inconvénients de l'utilisation de redux-saga avec ES6 générateurs vs redux-thunk avec ES2017 async/await

Il y a beaucoup de discussion à propos du dernier enfant dans redux ville, redux-saga/redux-saga. Il utilise le générateur de fonctions pour écouter/envoi actions.

Avant de m'envelopper ma tête autour de lui, j'aimerais connaître les avantages/inconvénients de l'utilisation de redux-saga au lieu de l'approche ci-dessous où je suis en utilisant redux-thunk avec async/await.

Un composant pourrait ressembler à ceci, envoi actions, comme d'habitude.

import { login } from 'redux/auth';

class LoginForm extends Component {

  onClick(e) {
    e.preventDefault();
    const { user, pass } = this.refs;
    this.props.dispatch(login(user.value, pass.value));
  }

  render() {
    return (<div>
        <input type="text" ref="user" />
        <input type="password" ref="pass" />
        <button onClick={::this.onClick}>Sign In</button>
    </div>);
  } 
}

export default connect((state) => ({}))(LoginForm);

Alors mes actes ressembler à quelque chose comme ceci:

//auth.js

import request from 'axios';
import { loadUserData } from './user';

//define constants
//define initial state
//export default reducer

export const login = (user, pass) => async (dispatch) => {
    try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, pass });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}

//more actions...

//user.js

import request from 'axios';

//define constants
//define initial state
//export default reducer

export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}

//more actions...
  • Voir aussi ma réponse en comparant redux-thunk pour redux-saga ici: stackoverflow.com/a/34623840/82609
  • Qu'est-ce que le :: avant votre this.onClick faire?
  • c'est un court de main pour la liaison de la fonction de l'objet (this), aka this.onClick = this.onClick.bind(this). La forme longue est généralement recommandé de le faire dans le constructeur, comme le court de main re-lie sur chaque rendu.
  • Je vois. merci! Je vois des gens à l'aide d' bind() beaucoup à passer this à la fonction, mais j'ai commencé à utiliser () => method() maintenant.
  • avez-vous trouvé redux saga utile? Après l'explication, que je ne pouvais pas trouver n'importe quel avantage.
  • J'ai utilisé redux & redux-saga de la production pendant un certain temps, mais effectivement migré vers MobX après une couple de mois car moins de frais généraux