React
Reagera med Redux
Sök…
Introduktion
Redux har kommit till att vara status quo för att hantera applikationsnivåstillstånd i framtiden idag, och de som arbetar med "storskaliga applikationer" svär ofta vid det. Det här ämnet beskriver varför och hur du ska använda det statliga förvaltningsbiblioteket, Redux, i dina React-applikationer.
Anmärkningar
Medan Reacts komponentdrivna arkitektur är fantastisk för att dela upp applikationen i modulära, inkapslade små bitar, introducerar den några utmaningar för att hantera applikationstillståndet som helhet. Tiden att använda Redux är när du behöver visa samma data över mer än en komponent eller sida (aka route). Vid den tidpunkten kan du inte längre lagra data i variabler som är lokala för den ena komponenten eller den andra, och att skicka meddelanden mellan komponenterna blir snabbt en röra. Med Redux prenumererar alla dina komponenter på samma delade data i butiken och därmed kan staten lätt reflekteras konsekvent över hela applikationen.
Använda Connect
Skapa en Redux-butik med createStore .
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})
Använd anslut för att ansluta komponent till Redux-butiken och dra rekvisita från butik till komponent.
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
Definiera åtgärder som gör att dina komponenter kan skicka meddelanden till Redux-butiken.
/*
* action types
*/
export const ADD_TODO = 'ADD_TODO'
export function addTodo(text) {
return { type: ADD_TODO, text }
}
Hantera dessa meddelanden och skapa ett nytt tillstånd för butiken i reduceringsfunktioner.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}