Comment utiliser React-Redux pour éviter l'état local dans mon code?

Utiliser le fournisseur de React-Redux et votre magasin sera disponible pour tous vos composants enfants

                var store = createStore(changeState)
                <Provider store={store}>
                   {child}
                </Provider>

ci-dessous est ce que vous devez faire, j'ai donné un exemple avec composant comp1 strong>, Vérifiez également ce lien https://reux.js.org/basics/usage-with- Réagir aide à obtenir plus d'informations.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { connect } from 'react-redux'

class Comp1 extends React.Component {
    increase = () => {
        var action = {
            type: 'INCREMENT',
            qty: 1,
            price: 100
        }
        store.dispatch(action);
    }


    render() {
        return (
            <button type="button" onClick={this.increase}>Increase</button>
        )
    }
}

mapStateToProps = state =>{
  //code to map State to props
}

mapDispatchToProps = dispatch =>{
  //code to map dispatch to props
}

export deafult connect(mapStateToProps,mapDispatchToProps)(Comp1);

Bien sûr, vous pouvez, d'abord, assurons-vous que des concepts sont clairs.

REDUX a déjà un «état», de sorte que vous la copiez sur votre état interne est redondant. p>

Connectez ( ) code>:
Cette méthode de commodité est utilisée pour cartographier l'état du redux, aux accessoires de votre composant. C'est-à-dire que vous ne copiez pas l'état dans un autre État, vous utilisez l'état de Redux comme des accessoires qui sont intégrés et plus comme une référence aux données réelles à l'intérieur de Redux.
Il est construit avec un modèle d'appel hoc , mais c'est une leçon pour une autre question. La chose importante à savoir à propos d'un hoc est qu'il faut un composant comme un argument et qu'il renvoie un nouveau composant, une nouvelle composante, une amélioration d'une. P>

MapStaTeToprops () code>:
Ce sera votre moyen de raconter connectez code> quelle partie de l'état de REDUX vous souhaitez entrer dans votre composant. C'est une méthode qui reçoit l'état complet de Redux, extrait les propriétés que vous souhaitez utiliser et les renvoie à être envoyé en tant que accessoires à votre composant. P>

Vous manquez une partie clé de l'écaille ici, Quel est le redux's ...
Fournisseur Code>:
Cette pièce devrait envelopper toute votre application (ou la partie de celui -ble que vous souhaitez que ce soit sur le redux accès, qui est généralement tout cela) et est celui qui est responsable de l'envoi de l'enregistrement du magasin de Redux dans l'arborese, donc Connecter code> peut saisir la plus tard (ceci est réalisé via React's's contexte , mais c'est un repas pour un autre Date).
Vous obtenez votre fournisseur comme: importer {fournisseur} de 'React-redux'; code> et ensuite vous lui donnez le magasin comme un appel appelé .... Store code> (juste intelligent ?) p>

assez de chat de chit à droite, passons aux entreprises. P>

Nous commençons avec les importations, obtenons tout ce dont nous avons besoin: p>

class Comp2 extends React.Component {

    render() {

        return (
            <div>
                <h1>Total items in cart: {this.props.qty}</h1>
                <h1>Total price of cart :{this.props.price}</h1>
            </div>
        )
    }
}

function mapStateToProps( state ){
    return { qty: state.qty, price:state.price }
}

Comp2 = connect(mapStateToProps)(Comp2);