Recherche…


Introduction

Redux est devenu le statu quo pour la gestion de l’état au niveau de l’application au début, et ceux qui travaillent sur des «applications à grande échelle» ne jurent que par lui. Cette rubrique explique pourquoi et comment utiliser la bibliothèque de gestion des états, Redux, dans vos applications React.

Remarques

Bien que l’architecture pilotée par composants de React soit fantastique pour décomposer l’application en petites pièces modulaires et encapsulées, elle présente certains défis pour la gestion de l’état de l’application dans son ensemble. Le temps d'utiliser Redux, c'est lorsque vous devez afficher les mêmes données sur plusieurs composants ou pages (route connue). À ce stade, vous ne pouvez plus stocker les données dans des variables locales à un composant ou à un autre, et l'envoi de messages entre les composants devient rapidement désordonné. Avec Redux, vos composants sont tous abonnés aux mêmes données partagées dans le magasin et, par conséquent, l’état peut être facilement répercuté de manière cohérente sur l’ensemble de l’application.

Utiliser Connect

Créez un magasin Redux avec createStore .

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})

Utilisez connect pour connecter le composant au magasin Redux et extrayez les accessoires d'un magasin à l'autre.

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

Définissez les actions permettant à vos composants d'envoyer des messages au magasin Redux.

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

Gérez ces messages et créez un nouvel état pour le magasin dans les fonctions du réducteur.

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow