React
Reaguj z Redux

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


Wprowadzenie

Redux stał się obecnie quo do zarządzania stanem aplikacji na froncie, a ci, którzy pracują nad „aplikacjami na dużą skalę”, często przysięgają. W tym temacie opisano, dlaczego i jak należy korzystać z biblioteki zarządzania stanem Redux w aplikacjach React.

Uwagi

Chociaż architektura oparta na komponentach React jest fantastyczna do dzielenia aplikacji na modułowe, enkapsulowane małe elementy, stwarza ona pewne wyzwania w zarządzaniu stanem aplikacji jako całości. Czas na użycie Redux to czas, kiedy musisz wyświetlić te same dane na więcej niż jednym komponencie lub stronie (inaczej trasa). W tym momencie nie można już przechowywać danych w zmiennych lokalnych dla jednego lub drugiego komponentu, a wysyłanie wiadomości między komponentami szybko staje się bałaganem. Dzięki Redux wszystkie komponenty subskrybują te same współużytkowane dane w sklepie, dzięki czemu stan może być łatwo odzwierciedlony w całej aplikacji.

Korzystanie z Connect

Utwórz sklep Redux za pomocą createStore . 

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

Użyj connect, aby połączyć komponent ze sklepem Redux i ściągać rekwizyty ze sklepu do komponentu. 

import { connect } from 'react-redux'

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

export default VisibleTodoList

Zdefiniuj działania, które pozwolą Twoim komponentom wysyłać wiadomości do sklepu Redux. 

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'

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

Obsługuj te komunikaty i utwórz nowy stan sklepu w funkcjach reduktora. 

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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow