Schritt-für-Schritt: So fügen Sie einer React-App Redux hinzu

Keine Zeit? Klonen Sie das Repo und legen Sie los!

git clone 
cd react-playbook/packages/react-redux
npm install
npm start

reagieren-redux-schnellstart.gif

Vorherigen Post

Sieh dir diesen Beitrag zum Einrichten von React an, wenn du neu anfängst.

In diesem Beitrag erstellen wir eine einfache Zähler-App, die den Status erhöht und verringert. Der Zustand ist eine Ganzzahl.

Schritt 1: Importieren Sie Redux NPM-Pakete

npm install redux react-redux

Schritt 2: Erstellen Sie einen Reduzierer

Ein Reduzierer ist eine reine Funktion, die 2 Parameter akzeptiert: Zustand und Aktion. Zustand kann alles sein, einschließlich Objekte. Aktion ist ein Objekt mit type -Eigenschaft, die den Aktionstyp als Zeichenfolge angibt. Lassen Sie uns eine erstellen countReducer in src/index.js

src/index.js
const countReducer = function (state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

Der Status wird mit 0 initialisiert (beim Starten der App). Wir verarbeiten 3 Arten von Aktionen, wobei der Standardfall den ursprünglichen Zustand unverändert zurückgibt. Die anderen beiden Fälle ändern den Wert des Zustands und geben ihn als “neuen” Zustand zurück (dies ist wichtig für Unveränderlichkeit wenn der Staat ein Objekt ist).

Schritt 2: Erstellen Sie einen Redux-Speicher

Der Speicher hält den Zustand als ein großes globales Objekt, das als Zustandsbaum bekannt ist. Der Shop ermöglicht uns:
versenden Aktionen, um den Zustand zu ändern
Abonnieren um Benachrichtigungen über Zustandsänderungen zu erhalten
abrufen der gesamte Zustandsbaum
Lassen Sie uns den Redux-Speicher importieren und erstellen und unseren Reducer verwenden, um ihn zu initialisieren:

src/index.js
...
import { createStore } from 'redux';
...
let store = createStore(countReducer);
...

In unserem Fall ist der gesamte Zustandsbaum nur ein einziger Reducer. Nichts Komplexes. Wir werden in späteren Tutorials lernen, wie man einen komplexeren Zustandsbaum erstellt.

Schritt 3: Umschließen Sie die Haupt-App-Komponente mit Provider

Jetzt werden wir uns verbinden redux zu react mit der NPM-Bibliothek react-redux. Lassen Sie uns die importieren <Provider />, und packen Sie unsere Haupt-App-Komponente damit ein. Übergeben Sie auch unsere zuvor erstellte store in die <Provider />‘s Shop-Requisite.

src/index.js
...
import { Provider } from 'react-redux';
...
const App = () => (
  <Provider store={store}>
    <h1>Helloworld React & Redux!</h1>
  </Provider>
);
ReactDOM.render(<App />, document.getElementById('root'));

Das <Provider/> wird unseren gesamten Komponentenbaum mit dem globalen Zustandsbaum versorgen.

Schritt 4: Erstellen und verbinden Sie eine Containerkomponente

In der Welt von React & Redux, Container (intelligente) Komponenten sind dafür verantwortlich, den Zustand aus dem Redux-Speicher zu ziehen, ihn umzuwandeln und an ihn weiterzugeben Präsentatorische (dumme) Komponenten. Lassen Sie uns unsere konvertieren <h1> Tag in a Container-Komponente.

src/index.js
...
import { Provider, connect } from 'react-redux';
...
const Component = () => <h1>Helloworld React & Redux!</h1>;

const Container = connect()(Component);

const App = () => (
  <Provider store={store}>
    <Container />
  </Provider>
);
...

Wir importieren die Connect-Funktion aus react-redux. Wir refaktorisieren unser Original <h1> Komponente hinein Component. Dann erstellen wir eine neue Containerkomponente namens Container. Der Erste () beruft sich auf die connect Funktion und bindet an den Redux Store. Dann rufen wir die zurückgegebene Funktion our auf Präsentationskomponente genannt Component. Jetzt haben wir unsere offiziell verbunden Component zu Redux, aber es macht im Moment nichts Besonderes.

Schritt 5: Status aus Redux Store auswählen und transformieren

Nutzen wir unsere Container -Komponente, um den Zustand auszuwählen und optional zu transformieren.

src/index.js
...
const mapStateToProps = state => {
  return {
    count: state
  };
};
const Container = connect(mapStateToProps)(Component);
...

Hier definieren wir eine neue Funktion namens mapStateToProps das wörtlich Karten oder verknüpft den Zustand aus dem Redux-Speicher mit den Komponenten-Requisiten, die wir an unsere Downstream-Komponente weitergeben möchten. In diesem Fall konvertieren wir den Zustand (der nur eine Zahl ist, von countReducer) zu einer Requisite namens count. Wir sollten hier alle notwendigen Transformationen vornehmen.

Schritt 6: Verwenden Sie den Zustand in der Präsentationskomponente

Das count prop wird jetzt an unsere weitergegeben Component. Deklarieren wir es als unseren Parameter und fügen es dem JSX hinzu. Die schwere Verantwortung der Präsentationskomponente ist es, Requisiten mit wenig oder keiner Logik in JSX zu konvertieren.

src/index.js
const Component = ({count}) => <h1>Helloworld React & Redux! {count}</h1>;

Aktualisieren Sie die Seite und Sie sollten jetzt sehen 0 neben der Überschrift. Wir erhalten jetzt Status vom Redux Store! Aber wie ändern wir es? Werfen wir einen Blick auf Aktionen.

Schritt 7: Fügen Sie unserer Präsentationskomponente Schaltflächen hinzu

Jetzt werden wir zwei Schaltflächen in unserer hinzufügen Präsentationskomponente die den Zählerstand erhöhen und verringern.

src/index.js
const Component = ({count, handleIncrementClick, handleDecrementClick}) => (
  <div>
    <h1>Helloworld React & Redux! {count}</h1>
    <button onClick={handleDecrementClick}>Decrement</button>
    <button onClick={handleIncrementClick}>Increment</button>
  </div>
);

Beachten Sie, dass wir die beiden Click-Handler als Requisiten an die beiden Schaltflächen übergeben. Wir stellen diese Rückrufe von der zur Verfügung Container zum Versenden von Aktionen an den Redux-Speicher. Diese Schaltflächen sind nicht funktionsfähig, bis wir dies tun.

Schritt 8: Übergeben Sie den Rückruf, der Aktionen an den Speicher versendet

Es ist an der Zeit, unseren Shop-Versand auf Callback-Funktionen abzubilden. Hier ist die Änderung:

src/index.js
const mapDispatchToProps = dispatch => {
  return {
    handleIncrementClick: () => dispatch({ type: 'INCREMENT' }),
    handleDecrementClick: () => dispatch({type: 'DECREMENT'})
  }
};
const Container = connect(mapStateToProps, mapDispatchToProps)(Component);

Wir übergeben eine zweite Funktion namens mapDispatchToProps zu unserer connect Funktion in der Container Komponente. Diese Funktion bildet die ab dispatch Funktion vom Redux Store zu den eingetragenen Callbacks. Diese Rückrufe werden als Eigenschaft des Rückgabeobjekts benannt und als Props (handleIncrementClick und handleDecrementClick). Jetzt sollte es funktionieren! Wir können den Zustand mit den Schaltflächen ändern!

Schritt 9 (optional): Refactoring des Codes

Lassen Sie uns den ähnlichen Code in separate Dateien verschieben, um das Projekt sauber und gepflegt zu halten. Lassen Sie uns eine separate Datei für die erstellen Container Komponente, Präsentativ Komponente, Speicherinitialisierung und Reduzierer. Lassen Sie uns auch alle setzen counter Code in ein einzelnes Verzeichnis, denn wenn das Projekt wächst, werden wir andere Komponenten mit ihren eigenen Reducern, Containern und Präsentationskomponenten erstellen. Die endgültige Verzeichnisstruktur sollte wie folgt aussehen:

src
├── configure-store.js
├── counter
│   ├── component.js
│   ├── container.js
│   └── reducer.js
├── index.html
└── index.js

Und hier ist der Code in jeder Datei:

src/counter/component.js
import React from 'react';

export const Component = ({ count, handleIncrementClick, handleDecrementClick }) => (
  <div>
    <h1>Helloworld React & Redux! {count}</h1>
    <button onClick={handleDecrementClick}>Decrement</button>
    <button onClick={handleIncrementClick}>Increment</button>
  </div>
);
src/counter/container.js
import { connect } from 'react-redux';
import { Component } from './component';

const mapStateToPros = state => {
  return {
    count: state
  };
};
const mapDispatchToProps = dispatch => {
  return {
    handleIncrementClick: () => dispatch({ type: 'INCREMENT' }),
    handleDecrementClick: () => dispatch({ type: 'DECREMENT' })
  }
};
export const Container = connect(mapStateToProps, mapDispatchToProps)(Component);
src/counter/reducer.js
export const countReducer = function (state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};
src/configure-store.js
import { createStore } from 'redux';
import { countReducer } from './counter/reducer';

export const store = createStore(countReducer);
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './configure-store';
import { Container } from './counter/container';

const App = () => (
  <Provider store={store}>
    <Container />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Fazit

Danke fürs Lesen. Probier das aus Code auf meinem Github. Wenn Sie Vorschläge haben oder diskutieren möchten, hinterlassen Sie hier einen Kommentar!

Similar Posts

Leave a Reply

Your email address will not be published.