react-reduxErste Schritte mit React-Redux

Bemerkungen

import { connect } from 'react-redux';

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

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

Versionen

Vollständiges Beispiel

Nehmen wir an, wir haben einen Container "CustomersContainer", der eine dumme Komponente "Customers" mit dem Redux-Store verbindet.

In 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')
);
 

In CustomersContainer:

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;
 

Hallo Welt mit React Redux

In diesem Handbuch wird vorausgesetzt , dass Sie bereits installiert react , redux , react-router und react-redux und konfiguriert haben , react , redux und react-router ., Wenn Sie nicht haben, bitte tun.

Hinweis: Der react-router keine Abhängigkeit von react-redux , aber es ist sehr wahrscheinlich, dass wir ihn in unserer Reakt-Anwendung für das Routing verwenden werden. Dies macht es sehr einfach, Reakt-Redux zu verwenden.

Dateiname: 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')
);
 

Diese Datei wird für die meisten von Ihnen Sinn machen. Was wir hier tun, ist, den Store von ./stores und ihn an alle Routen zu übergeben, die den Component Provider mit höherer Ordnung verwenden, der von react-redux bereitgestellt wird.

Dadurch ist der Shop in unserer gesamten Anwendung verfügbar.

Betrachten wir nun dieses Szenario . Wir haben eine Komponente UserComponent die die Daten vom user Reducer UserComponent und über eine Schaltfläche verfügt, die beim Anklicken die Daten im Geschäft aktualisiert.

Anwendungsstruktur

Unser rootReducer hat user Reduzierer

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

Unser userReducer sieht so aus

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;
 

Und unsere actions sieht ungefähr so ​​aus

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

Zum Schluss arbeiten wir an unserer Komponente

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;
 

Natürlich funktioniert das nicht , da wir es noch nicht mit dem Laden verbunden haben.

Falls Sie sich fragen, ist dies eine zustandslose Funktionskomponente , da wir redux und keinen internen Zustand für unsere Komponente benötigen. Dies ist der richtige Zeitpunkt für die Verwendung.

Die connect , die von react-redux bereitgestellt wird, umfasst drei Parameter

mapStateToProps , mapDispatchToProps und die Komponente selbst.

connect( mapStateToProps, mapDispatchToProps )(Component)

Fügen wir in Verbindung mit mapStateToProps und mapDispatchToProps eine Verbindung zu unserer Komponente UserComponent hinzu

Und lass uns auch unsere changeUserDetails- Funktion aktualisieren. Wenn sie aufgerufen wird, wird dispatch eine action an unsere reducers senden. Abhängig von der Art der Aktion, die unser Reduzierer startet, werden Änderungen am Store vorgenommen, und sobald der Store aktualisiert hat, wird react-redux erneut react-redux -render unsere Komponente mit den neuen Daten.

Klingt kompliziert? Es ist wirklich nicht

Unsere UserComponent.js wird aussehen

'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;
 

Was wir hier gemacht haben, wird hinzugefügt

• mapStateToProps : Dadurch können wir die Daten aus dem Speicher abrufen. Wenn sich diese Daten ändern, wird unsere Komponente mit den neuen Daten erneut gerendert.

  Unsere Komponente wird nur dann erneut gerendert, wenn die Daten, die unsere Komponente anfordert, Änderungen in der Filiale anfragen und nicht, wenn sich andere Daten in der Filiale ändern.

• mapDispatchToProps : Dies ermöglicht uns das Senden von dispatch actions an alle Reduzierungen von unserer Komponente .. (könnte eine beliebige Komponente sein). Je nach type der Aktion startet unser userReducer einen neuen Status mit den aktualisierten Daten.

• ConnectedUserComponent : Zuletzt haben wir unsere Komponente mit der connect Methode mit dem Store verbunden, indem alle Parameter übergeben wurden, und die verbundene Komponente wurde exported .

• Wir haben auch unsere changeUserDetails- Funktion aktualisiert, um die method für Requisiten aufzurufen und die Daten weiterzuleiten. Und props wiederum senden die von uns aufgerufene Methode an alle Reduzierer.

HINWEIS:

• Wenn wir keinen neuen Zustand vom Reducer zurückgeben, wird der react-redux unsere Komponente nicht erneut darstellen.

Installation oder Setup

Die direkte Verwendung von redux mit react scheint wenig schwierig zu sein. Da jede component Sie bei Änderungen des Speichers aktualisieren möchten, aktualisiert werden muss, müssen Sie diese Komponente beim redux store abonnieren

React Redux kümmert sich um all dies und macht es wirklich einfach, Komponenten zu schreiben, die die benötigten Daten vom redux store und benachrichtigt werden können, wenn sich diese Daten ändern.

Zur Installation von react-redux Sie nur diesen npm Befehl ausführen

npm install --save react-redux
 

Und du bist fertig.

Hinweis: React Redux ist abhängig von

• React (Version 0.14 oder höher) und
• Redux

PDF - Download react-redux for free