Un guide rapide pour configurer une application React avec Redux + Thunk.

Qu'est-ce que Redux ?

Redux est une bibliothèque JavaScript utilisée pour gérer l'état de l'application. Il peut être décomposé en trois composantes principales.

1. Magasin
2. Action
3. Réducteur

Une action est un objet JavaScript simple qui possède deux attributs : un type et une charge utile . Le but principal d'une action est de décrire quelque chose qui s'est passé dans l'application (par exemple, l'utilisateur clique sur un bouton pour ajouter un article à son panier).

Un réducteur est une fonction qui prend en compte l'état actuel et une action. Il détermine comment mettre à jour l'état en fonction du type d'action, puis renvoie un nouvel état.

Pourquoi avons-nous besoin de Thunk ?

Un créateur d'action est une fonction qui renvoie un actionobjet, qui est ensuite envoyé au magasin Redux. Normalement, un créateur d'action ne peut renvoyer qu'un objet . En installant le middleware Thunk, nous pouvons créer des créateurs d'action qui renvoient une fonction à la place. Cela permet à votre application d'effectuer des appels de récupération et d'interagir avec un serveur.

Comparez les deux créateurs d'action ci-dessous.

// returns an object
export const createTodo = todo => {
  return {
    type: "CREATE_TODO",
    payload: todo
  }
}
// returns a function
export const getTodo = () => {
  return(dispatch) => {
    return fetch(url)
    .then(resp => resp.json())
    .then(todo => dispatch({ type: "GET_TODO", payload: todo }))
  })
}

Avant que nous commencions

Le but de notre application est d'afficher un bouton. Lorsque le bouton est cliqué, une image d'un chien au hasard doit être affichée.

Configurer Redux

Si vous n'avez pas encore configuré d'application React, lancez la commande suivante dans votre terminal.

npx create-react-app redux-app

yarn add redux react-redux redux-thunk

Configurer le réducteur

Accédez d' reducersabord au dossier. Créez un fichier nommé dogReducer.js.

// ./src/reducers/dogReducer.js
const dog = (state = '', action) => {
  switch(action.type) {
    case 'CHANGE_IMAGE':
      return action.payload
    default:
      return state
    }
}
export default dog;

Au fur et à mesure que votre application se développe, vous devrez peut-être créer plusieurs réducteurs. Pour ce faire, vous devrez créer un fichier combineReducers.

Naviguez dans le reducersdossier et créez un fichier appelé index.js.

// ./src/reducers/index.js
import { combineReducers } from 'redux';
import dog from './dogReducer';
import anotherReducer from './anotherReducer';
export default combineReducers({
  dog,
  anotherReducer
})

Accédez au actionsdossier suivant. Créez un fichier appelé index .js.

// ./src/actions/index.js
export const changeImage = () => {
  return(dispatch) => {
    return fetch('https://dog.ceo/api/breeds/image/random')
    .then(resp => resp.json())
    .then(image => dispatch({ type: "CHANGE_IMAGE", payload: image.message }))
  }
}

Accédez à ./src/index.js.

Importez ce qui suit.

import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import dog from './reducers/dogReducer';

import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Ensuite, créez le magasin.

let store = createStore(colors, composeEnhancers(applyMiddleware(thunk)))

<Provider store={store} >
  <App />
</Provider>

Créer des composants DogContainer et Dog

Accédez à ./src.

Créer DogContainer.js.

Créer Dog.js.

Conclusion

Courez yarn start.

À ce stade, l'application devrait être opérationnelle.

Résumer:

1. Un utilisateur cliquera sur le bouton Modifier l'image .
2. L'événement click déclenche une action à envoyer au magasin Redux.
3. L'action finira par atteindre notre middleware Thunk. C'est à ce moment que tous les processus asynchrones se produiront. Dans notre cas, une requête de récupération sera envoyée à une API externe, qui renverra l'URL d'une image de chien aléatoire.
4. Une fois notre travail asynchrone terminé, un objet d'action avec un attribut de charge utile contenant notre URL d'image sera envoyé au réducteur.
5. Le réducteur recevra l'état précédent et l'objet d'action actuel. Il renverra un nouvel état avec sa valeur définie sur l'URL de l'image.
6. Le changement d'état déclenchera un nouveau rendu, affichant notre nouvelle image de chien.