React
Réagir avec Redux
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
}
}