React Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status

React Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status
React ist eine sehr beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Und Redux ist eine JavaScript-Bibliothek zur Verwaltung des Anwendungsstatus. Gemeinsam helfen sie uns, den Front-End-Status besser zu verwalten. In diesem Artikel wird erläutert, wie Sie mit Redux den Status in React-Anwendungen verwalten, und es werden spezifische Codebeispiele bereitgestellt.

1. Redux installieren und einrichten

Zuerst müssen wir Redux und React Redux installieren. Führen Sie den folgenden Befehl im Projektverzeichnis aus, um die Abhängigkeiten zu installieren:

npm install redux react-redux

Nachdem die Installation abgeschlossen ist, müssen wir den Redux-Store einrichten. Erstellen Sie im Stammverzeichnis des Projekts eine Datei store.js und fügen Sie den folgenden Code hinzu: store.js文件，并添加以下代码：

import { createStore } from 'redux';

// 初始状态
const initialState = { count: 0 };

// Reducer函数
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 创建store
const store = createStore(reducer);

export default store;

这段代码创建了一个初始状态为{ count: 0 }的store，同时定义了一个reducer函数来处理状态的变化。当我们的应用需要增加计数器时，可以发送一个{ type: 'INCREMENT' }的action，减少计数器时发送{ type: 'DECREMENT' }的action。

二、将Redux集成到React应用中

接下来，在我们的React应用中将Redux集成进来。在根目录下的index.js文件中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

这段代码使用了React Redux提供的Provider组件，将Redux的store传递给了应用的根组件App，这样一来，我们就可以在任何需要读取或修改状态的组件中使用Redux。

三、在组件中使用Redux

现在，我们可以在组件中使用Redux来管理状态了。接下来，我们将创建一个Counter组件，用于展示计数器状态，并提供按钮来增加和减少计数器的值。在项目根目录下创建Counter.js文件，并添加以下代码：

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

class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  };

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  };

  render() {
    return (
      <div>
        <h1>计数器：{this.props.count}</h1>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(Counter);

这段代码展示了如何将Redux状态映射到组件的属性，以及如何在组件中派发action。通过调用connect函数并传递mapStateToProps函数，我们可以将Redux store中的{ count: 0 }映射到组件的this.props.count属性中。这样一来，当我们的应用状态发生变化时，组件将会自动更新。

最后，在应用的根组件App.js中添加Counter

import React from 'react';
import Counter from './Counter';

class App extends React.Component {
  render() {
    return <Counter />;
  }
}

export default App;

Dieser Code erstellt einen Anfangszustand von { count: 0 Store definiert außerdem eine Reduzierfunktion, um Zustandsänderungen zu verarbeiten. Wenn unsere Anwendung den Zähler erhöhen muss, kann sie eine Aktion vom Typ {: 'INCREMENT' senden, und wenn sie den Zähler verringern muss, kann sie eine Aktion vom Typ { senden : 'DECREMENT' .

Zweitens integrieren Sie Redux in die React-Anwendung.

Als nächstes integrieren Sie Redux in unsere React-Anwendung. Fügen Sie den folgenden Code zur Datei index.js im Stammverzeichnis hinzu:

rrreee

Dieser Code verwendet die von React Redux bereitgestellte Provider-Komponente, um den Redux-Speicher an das Stammverzeichnis zu übergeben Komponente der Anwendung App, sodass wir Redux in jeder Komponente verwenden können, die den Status lesen oder ändern muss. 🎜🎜3. Verwenden Sie Redux in Komponenten🎜🎜Jetzt können wir Redux in Komponenten verwenden, um den Status zu verwalten. Als Nächstes erstellen wir eine Counter-Komponente, die den Zählerstatus anzeigt und Schaltflächen zum Erhöhen und Verringern des Zählerwerts bereitstellt. Erstellen Sie die Datei Counter.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜Dieser Code zeigt, wie der Redux-Status den Eigenschaften der Komponente zugeordnet und Aktionen in der Komponente ausgelöst werden. Durch Aufrufen der Funktion connect und Übergeben der Funktion mapStateToProps können wir den { count: 0} im Redux-Store dem diese .props.countEigenschaft. Auf diese Weise wird die Komponente automatisch aktualisiert, wenn sich der Status unserer Anwendung ändert. 🎜🎜Fügen Sie abschließend die Komponente Counter zur Stammkomponente App.js der Anwendung hinzu: 🎜rrreee🎜Jetzt ist unsere React Redux-Anwendung konfiguriert. Wenn wir die App öffnen, sehen wir eine Zählerkomponente und können den Zählerwert erhöhen oder verringern, indem wir auf die Schaltfläche klicken. 🎜🎜Zusammenfassung: 🎜🎜In diesem Artikel wird die Verwendung von Redux zum Verwalten des Front-End-Status in React-Anwendungen vorgestellt und spezifische Codebeispiele bereitgestellt. Durch die Installation und Einrichtung von Redux und die anschließende Integration von Redux in eine React-Anwendung können wir den Status der Anwendung einfach verwalten und aktualisieren. Ich hoffe, dieser Artikel hilft Ihnen, die Verwendung von React Redux zu verstehen! 🎜

Das obige ist der detaillierte Inhalt vonReact Redux Tutorial: So verwenden Sie Redux zur Verwaltung des Front-End-Status. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!