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
  }
}


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow