Tutoriel React Redux : Comment utiliser Redux pour gérer l'état du front-end-js tutoriel-php.cn

Tutoriel React Redux : Comment utiliser Redux pour gérer l'état du front-end

WBOY

Libérer： 2023-09-26 11:33:05

original

665 Les gens l'ont consulté

React Redux教程：如何使用Redux管理前端状态

Tutoriel React Redux : Comment utiliser Redux pour gérer l'état du front-end
React est une bibliothèque JavaScript très populaire pour créer des interfaces utilisateur. Et Redux est une bibliothèque JavaScript permettant de gérer l'état des applications. Ensemble, ils nous aident à mieux gérer l’état du front-end. Cet article expliquera comment utiliser Redux pour gérer l'état dans les applications React et fournira des exemples de code spécifiques.

1. Installez et configurez Redux

Tout d'abord, nous devons installer Redux et React Redux. Exécutez la commande suivante dans le répertoire du projet pour installer les dépendances :

npm install redux react-redux

Copier après la connexion

Une fois l'installation terminée, nous devons configurer le magasin Redux. Dans le répertoire racine du projet, créez un fichier store.js et ajoutez le code suivant : 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;

Copier après la connexion

这段代码创建了一个初始状态为{ 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')
);

Copier après la connexion

这段代码使用了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);

Copier après la connexion

这段代码展示了如何将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;

Copier après la connexion

Ce code crée un état initial de { count: 0 } Le store définit également une fonction de réduction pour gérer les changements d'état. Lorsque notre application a besoin d'augmenter le compteur, elle peut envoyer une action de type { : 'INCREMENT' }, et lorsqu'elle a besoin de diminuer le compteur, elle peut envoyer une action de type { : 'DÉCRÉMENT' }.

Deuxièmement, intégrez Redux dans l'application React

Ensuite, intégrez Redux dans notre application React. Ajoutez le code suivant au fichier index.js dans le répertoire racine :

rrreee

Ce code utilise le composant Provider fourni par React Redux pour transmettre le magasin Redux à la racine composant de l'application App, afin que nous puissions utiliser Redux dans n'importe quel composant qui a besoin de lire ou de modifier l'état. 🎜🎜3. Utilisez Redux dans les composants🎜🎜Maintenant, nous pouvons utiliser Redux dans les composants pour gérer l'état. Ensuite, nous allons créer un composant Counter qui affiche l'état du compteur et fournit des boutons pour incrémenter et décrémenter la valeur du compteur. Créez le fichier Counter.js dans le répertoire racine du projet et ajoutez le code suivant : 🎜rrreee🎜Ce code montre comment mapper l'état Redux aux propriétés du composant et comment répartir les actions dans le composant. En appelant la fonction connect et en passant la fonction mapStateToProps, nous pouvons mapper le { count: 0} dans le magasin Redux au cette propriété .props.count. De cette façon, lorsque l'état de notre application change, le composant se mettra automatiquement à jour. 🎜🎜Enfin, ajoutez le composant Counter au composant racine de l'application App.js : 🎜rrreee🎜Maintenant, notre application React Redux a été configurée. Lorsque nous ouvrirons l'application, nous verrons un composant de compteur, et nous pourrons augmenter ou diminuer la valeur du compteur en cliquant sur le bouton. 🎜🎜Résumé : 🎜🎜Cet article explique comment utiliser Redux pour gérer l'état du front-end dans les applications React et fournit des exemples de code spécifiques. En installant et en configurant Redux, puis en intégrant Redux dans une application React, nous pouvons facilement gérer et mettre à jour l'état de l'application. J'espère que cet article vous aidera à comprendre l'utilisation de React Redux ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!