Comment obtenir de l'expédition redux

Je suis en train d'apprendre redux et de réagir. Je suis des tutoriels, afin de faire une application.

J'ai cette action:

export function getDueDates(){
  return {
    type: 'getDueDate',
    todo
  }
}

c'est le magasin:

import { createStore } from 'redux';
import duedates from './reducers/duedates'

export default createStore(duedates)

C'est le réducteur:

importation Immuable de "immuable'

export default (state = Immutable.List(['Code More!']), action) => {
  switch(action.type) {
    case 'getDueDate':
      return state.unshift(action.todo)
    default:
      return state
  }
}

et dans le entry point js j'ai ceci:

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

import store from './app/store'
import { Provider } from 'react-redux'

import App from './app/Components/AppComponent';


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

Maintenant, (selon certains exemples), je devrais l'appeler getDueDate de la dispatch mais je n'obtiens pas comment obtenir le dispatch sur le composant, pour déclencher l'action

OriginalL'auteur Pablo | 2016-02-20

  1. 5

    Utilisation connect de react-redux paquet. Il a deux fonctions params, mapStateToProps et mapDispatchToProps, ce qui vous intéresse aujourd'hui. Conformément à la réponse de Nick Balle, qui est en partie droite, vous serez à l'exportation comme ceci:

    export default connect(mapStateToProps, mapDispatchToProps)(App)

    et votre mapDispatchToProps va ressembler à quelque chose comme ceci:

    function mapDispatchToProps (dispatch, ownProps) {
  return {
    getDueDate: dispatch(getDueDate(ownProps.id))
  }
}

    aussi longtemps que votre composant connecté à la boutique a un id de propriété transmis à partir de ci-dessus, vous serez en mesure d'appeler this.props.getDueDate() de l'intérieur.

    EDIT: Il n'y a probablement pas besoin de l'aide d'un id dans ce cas, cependant, mon point est de dire que les accessoires aller comme deuxième paramètre 🙂

    Cela semble fonctionner!, est-il facile workarroud pour faire un appel asynchrone au serveur sur le réducteur? Il semble mise à jour de la prop directement lors de l'appel à l'action, et lors de l'appel asynchrone se termine, il ne change pas la prop
    Pas le réducteur, l'utilisation thunk-middleware qui permet à des fonctions de régulation. Cette fonction a deux params, dispatch et getState. Cela vous permet de faire quoi que ce soit et envoi tout ce que vous voulez dans la fonction.
    C'est ce à quoi je parle: danmaz74.moi/2015/08/19/...
    Je vais juste ajouter une chose en plus, les réducteurs doivent TOUJOURS ÊTRE les FONCTIONS PURES, c'est à dire. sans effets secondaires. Il ne doit recevoir de l'état, de l'action et de retour nouvel état. Tout ce qui ne rentre pas dans cette description devrait probablement être traité ailleurs (plus probablement).
    super! Merci beaucoup!

    OriginalL'auteur george.cz

  2. 2

    La pièce manquante ici est la se connecter fonction de react-redux. Cette fonction "connect" votre composant le magasin, en lui donnant le dispatch méthode. Il y a des variations sur comment exactement pour ce faire, je vous suggère la lecture de la documentation, mais un moyen simple serait quelque chose comme ceci:

    //app/Components/AppComponent.js

import { connect } from 'react-redux';

export class App extends React.Component {

    /* ...you regular class stuff */

    render() {

        //todos are available as props here from the `mapStateToProps`
        const { todos, dispatch } = this.props;

        return <div> /* ... */ </div>;
    }
}

function mapStateToProps(state) {
    return {
        todos: state.todos
    };
}

//The default export is now the "connected" component
//You'll be provided the dispatch method as a prop
export default connect(mapStateToProps)(App);
    Non, vous ne devriez pas le faire comme ça! Vous devriez utiliser le deuxième paramètre de se connecter, mapDispatchToProps, pour créer des fonctions qui sont ensuite transmis comme accessoires.
    Je comprends qu'il y a différentes façons d'injecter les actions et je suis d'accord avec vous, mais la question n'était pas à propos de les meilleures pratiques pour la connexion d'un composant, il était sur la manière de connecter un composant dans la première place. Ne pas utiliser le mapDispatchToProps méthode était simplement un moyen de maintenir le nombre de nouveaux concepts à un minimum.
    Eh bien, il est en train de demander à un moyen d'obtenir l'accès à dispatch de l'intérieur de sa composante, le chemin que j'ai proposée est la bonne façon de le faire... de La façon dont vous suggérer les pentes qu'il doit maintenant passer dispatch lui-même afin de composants enfants, qui est essentiellement mauvais.
    Je vais m'arrêter après cela, mais encore une fois, nous parlons de meilleures pratiques. La façon dont j'ai énuméré n'est pas "mauvais" parce qu'il va travailler. C'est littéralement de la documentation: github.com/reactjs/react-redux/blob/master/docs/.... Il y a beaucoup de nouveaux concepts à apprendre à Réagir/Redux monde donc je pensais que ça serait mieux pour commencer la plus simple et de grandir à partir de là.
    Eh bien, le fait qu'il fonctionne n'est pas encore parfait 🙂 je obtenir votre point si, au contraire, je crois que lorsque vous commencez à apprendre des choses, vous pouvez ainsi apprendre la bonne façon...

    OriginalL'auteur Nick Ball