Looking for react-redux Answers? Try Ask4KnowledgeBase
Looking for react-redux Keywords? Try Ask4Keywords

react-reduxCommencer à réagir avec Redux


Remarques

React Redux est une bibliothèque qui fournit des liaisons React pour Redux.

Les composants React connus par le magasin Redux sont appelés "Conteneurs", "Composants intelligents" ou "Composant d'ordre supérieur" (HOC). De tels composants, pour utiliser Redux, doivent:

  • Abonnez-vous au magasin pour obtenir des mises à jour du magasin Redux
  • Actions d'expédition

Faire cela à la main implique d'utiliser store.subscribe et store.dispatch(action) dans des conteneurs React.

React Redux simplifie la liaison entre le magasin Redux et un composant de conteneur React par le biais de la fonction de connect , qui mappe les propriétés de l'état Redux et les créateurs d'Action aux accessoires du composant.

connect est une fonction qui crée un composant d'ordre supérieur. Connect accepte 3 fonctions ( mapStateToProps , mapDispatchToProps , mergeProps ) et renvoie un composant conteneur qui encapsule le composant d'origine pour en faire un composant "connecté":

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

Voir la section des exemples pour un exemple complet.

Comme tous les composants de conteneur doivent accéder au magasin Redux, la méthode recommandée consiste à utiliser un composant <Provider> spécial de React Redux, qui transmet le magasin à tous les composants enfants (en interne à l'aide du contexte React).

Documentation officielle: http://redux.js.org/docs/basics/UsageWithReact.html

Repo GitHub: https://github.com/reactjs/react-redux

Versions

Version Date de sortie
5.0.3 2017-02-23
5.0.2 2017-01-11
5.0.1 2016-12-14
5.0.0 2016-12-14
4.4.6 2016-11-14
4.4.5 2016-04-14
4.4.4 2016-04-13
4.4.3 2016-04-12
4.4.0 2016-02-06
4.3.0 2016-02-05
4.2.0 2016-02-01
4.1.0 2016-01-28
4.0.0 2015-10-15
3.0.0 2015-09-24
2.0.0 2015-09-01
1.0.0 2015-08-24
0.5.0 2015-08-07
0.1.0 2015-07-12

Exemple complet

Supposons que nous ayons un conteneur "CustomersContainer" qui connecte un composant muet "Clients" au magasin Redux.

Dans index.js:

import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';

let store = createStore(rootReducer);

render(
  <Provider store={store}>
    <CustomersContainer />
  </Provider>,
  document.getElementById('root')
);
 

Dans le ClientContainer:

import React, { Component } from 'react';
import { connect } from 'react-redux';

// Import action creators
import { fetchCustomers } from '../redux/actions';

// Import dumb component
import Customers from '../components/Customers';

// ES6 class declaration
class CustomersContainer extends Component {
  componentWillMount() {
    // Action fetchCustomers mapped to prop fetchCustomers
    this.props.fetchCustomers();
  }

  render() {
    return <Customers customers={this.props.customers} />;
  }
}

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

// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name 
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);

export default CustomersContainer;
 

Bonjour tout le monde en utilisant React Redux

Ce guide suppose que vous avez déjà installé react , redux , react-router et react-redux et ont configuré react , redux et react-router . Si vous n'avez pas, S'il vous plaît le faire.

Note: Bien que react-router ne soit pas une dépendance de react-redux , il est très probable que nous l'utilisions dans notre application de réaction pour le routage, ce qui facilite grandement l'utilisation de react-redux.


FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';

render(
  (
    <Provider store={ store }>
      <Router history={ browserHistory }>
        {/* all the routes here */}
      </Router>
    </Provider>
  ),
  document.getElementById('app')
);
 

Ce fichier a du sens pour la plupart d'entre vous. Ce que nous faisons ici est d'obtenir le magasin de ./stores et de le transmettre à toutes les routes utilisant le Provider composants d'ordre supérieur fourni par react-redux .

Cela rend le magasin disponible dans notre application.


Maintenant, considérons ce scénario . Nous avons un composant UserComponent qui récupère les données du réducteur user et possède un bouton qui, une fois cliqué, met à jour les données du magasin.

Structure de l'application

Notre rootReducer a user réducteur d' user

const rootReducer = combineReducers({
    user: userReducer,
})
export default rootReducer;
 

Notre userReducer ressemble à ceci

const default_state = {
  users: [],
  current_user: {
    name: 'John Doe',
    email: 'john.doe@gmail.com',
    gender: 'Male'
  },
  etc: {}
};

function userReducer( state=default_state, action ) {

  if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
    return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
  }
  else {
    return state;
  }

}

export default userReducer;
 

Et notre fichier d' actions ressemble à quelque chose comme ça

export function updateCurrentUserData( data ) {
  return {
    type: "UPDATE_CURRENT_USER_DATA",
    payload: data
  }
}
 

Enfin, permet de travailler sur notre composant

FILENAME: UserComponent.js

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    // do nothing
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

export default UserComponent;
 

Bien sûr, cela ne fonctionnera pas , car nous ne l'avons pas encore connecté au magasin.

Au cas où vous vous poseriez la question, il s'agit d'un composant fonctionnel sans état , puisque nous utilisons redux et que nous n'avons pas vraiment besoin d'un état interne pour notre composant, c'est le bon moment pour l'utiliser.

La méthode de connect fournie par react-redux prend en compte trois paramètres

mapStateToProps , mapDispatchToProps et le composant lui-même.

connect( mapStateToProps, mapDispatchToProps )(Component)


Ajoutons connect à notre composant UserComponent avec mapStateToProps et mapDispatchToProps

Et nous allons également mettre à jour notre fonction changeUserDetails, alors quand appelé, il dispatch une action à nos reducers , et en fonction du type d'action de notre réducteur donnera le coup et apporter des modifications au magasin, et une fois le magasin mis à jour react-redux sera à nouveau -rendre notre composant avec les nouvelles données.

Cela semble compliqué? Ce n'est vraiment pas.

Notre UserComponent.js ressemblera à

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

const mapStateToProps = ( state, ownProps ) => {
  return {
    current_user: state.user.current_user,
  }
}

const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
  }
}


let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    props.updateCurrentUserData({ field: field, value: value });
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

const ConnectedUserComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserComponent)

export default ConnectedUserComponent;
 

Ce qu'on a fait ici est ajouté

  • mapStateToProps : Cela nous permet d'obtenir les données du magasin et, lorsque ces données changent, notre composant sera restitué avec les nouvelles données.

    Notre composant ne rendra le rendu que si les données de notre composant demandent des modifications dans le magasin et non quand d’autres données sont modifiées dans le magasin.

  • mapDispatchToProps : Cela nous permet d' dispatch actions à tous les réducteurs de notre composant .. (peut être n'importe quel composant). Et selon le type d'action, notre userReducer entrera et retournera un nouvel état avec les données mises à jour.

  • ConnectedUserComponent : Enfin, nous avons connecté notre composant au magasin en utilisant la méthode connect en transmettant tous les paramètres et en exported le composant connecté.

  • Nous avons également mis à jour notre fonction changeUserDetails pour appeler la method sur les accessoires et transmettre également les données. Et les props distribuent à leur tour la méthode appelée à tous les réducteurs.


REMARQUE:

  • Si nous ne renvoyons pas un nouvel état du réducteur, react-redux ne rendra pas notre composant.

Installation ou configuration

En utilisant redux directement react peut sembler peu difficile, comme pour tout component que vous souhaitez mettre à jour lorsque mémorisez vos modifications, vous devez vous abonner ce composant au redux store

React Redux prend soin de tous ces éléments et facilite grandement l'écriture des composants pouvant demander les données dont ils ont besoin à partir du redux store et être notifié uniquement lorsque ces données changent. Cela nous permet d'écrire des composants vraiment efficaces.

Pour installer react-redux il suffit de lancer cette commande npm

npm install --save react-redux
 

Et tu as fini.


Remarque: React Redux dépend de

  • Réagir (version 0.14 ou ultérieure) et
  • Redux