React
Reagire con Redux

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Ricerca…


introduzione

Redux è diventato lo status quo per la gestione dello stato a livello di applicazione sul front-end in questi giorni, e coloro che lavorano su "applicazioni su larga scala" spesso lo giurano. Questo argomento spiega perché e come utilizzare la libreria di gestione dello stato, Redux, nelle applicazioni React.

Osservazioni

Sebbene l'architettura basata su componenti di React sia fantastica per scomporre l'applicazione in piccoli pezzi modulari e incapsulati, introduce alcune sfide per la gestione dello stato dell'applicazione nel suo complesso. Il tempo di usare Redux è quando hai bisogno di visualizzare gli stessi dati su più di un componente o pagina (pseudonimo). A quel punto non è più possibile memorizzare i dati nelle variabili locali di un componente o dell'altro e l'invio di messaggi tra i componenti diventa rapidamente un disastro. Con Redux i componenti sono tutti abbonati agli stessi dati condivisi nello store e quindi lo stato può essere facilmente riflesso in modo coerente nell'intera applicazione.

Utilizzando Connect

Creare un negozio Redux con createStore . 

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

Usa connetti per connettere il componente all'archivio Redux e tirare i puntelli da negozio a componente. 

import { connect } from 'react-redux'

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

export default VisibleTodoList

Definire le azioni che consentono ai componenti di inviare messaggi all'archivio di Redux. 

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'

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

Gestire questi messaggi e creare un nuovo stato per l'archivio nelle funzioni di riduzione. 

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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow