Comment utiliser React Redux-js tutoriel-php.cn

Comment utiliser React Redux

php中世界最好的语言

Libérer： 2018-06-02 15:47:24

original

1218 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser React Redux et quelles sont les précautions lors de l'utilisation de React Redux. Voici des cas pratiques, jetons un coup d'oeil.

Préparation de l'environnement

Pour plus de commodité, create-react-app est utilisé ici pour créer l'environnement de réaction

create-react-app mydemo

Copier après la connexion

Pop- up configuration

Si vous devez personnaliser la configuration de React, vous devez exécuter la commande suivante pour faire apparaître le fichier de configuration.

npm run eject

Copier après la connexion

Installer redux

npm i redux --save

Copier après la connexion

Compréhension simple

L'utilisation simple de redux consiste à s'abonner via son stocker et publier des informations.

Abonnez-vous à l'action en vous abonnant et déclenchez l'action via l'envoi. Le réducteur définit ce que chaque action doit faire.

code démo

définition du réducteur

const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Copier après la connexion

fichier d'entréeindex.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

Copier après la connexion

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

Copier après la connexion

Pour déclencher une action via l'envoi en magasin, l'événement souscrit dans index.js sera exécuté.

Exécution asynchrone de Redux

Si vous devez effectuer des opérations asynchrones dans Redux, vous devez installer le plug-in React-Thunk

npm i react-thunk --save

Copier après la connexion

Vous avez également besoin du plug-in redux applyMiddleware

Code clé

Le paramétrage est en fait très simple Lors de la création de la boutique, il suffit de lui transmettre le mot de passe.

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

Copier après la connexion

Ajouter un bouton qui déclenche une opération asynchrone dans app.js. Une méthode asynchrone a été définie dans le réducteur.

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Copier après la connexion

L'appel asynchrone de la méthode renverra une méthode avec deux paramètres. Les deux paramètres sont des fonctions, le premier est la fonction de répartition et le second est la fonction getState.
dispatch déclenche une action et getState obtient la valeur de state.

Ajouter du code dans app.js

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. php site chinois !

Lecture recommandée :

Comment utiliser Vue pour implémenter un bouton de compte à rebours

Comment utiliser Vue pour écrire un deux liaison de données -way

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!