szczecinski.eu

szczecinski.eu

  • Kurs React
  • Zaawansowany React
  • Kurs Redux
  • Kurs ES6
  • Blog
  • Kontakt

›Dodatkowe informacje

Intro

  • Czym jest Redux
  • Instalacja
  • Akcje
  • Reducery
  • Store
  • Przykładowa aplikacja
  • Wiele reducerów

Użycie z React

  • Redux i React
  • react-redux
  • Instalacja
  • Provider
  • connect
  • Argumenty connect

    • mapStateToProps
    • mapDispatchToProps

Dodatkowe informacje

  • Selektory
  • Middleware
  • Przykładowe middleware

    • redux-thunk
    • redux-immutable-state-invariant
  • Niemutowalne aktualizowanie stanu
  • Testowanie reduxa
  • Narzędzia

redux-immutable-state-invariant

immutable-state-invariant to kolejne małe middleware które pozwala nam sprawdzić, czy nasze reducery przypadkiem nie mutują stanu na żadnym etapie jego aktualizacji. Przydatne jest głównie w przypadku początkujących developerów:

npm install react-invariant-state-middleware
import invariant from 'redux-immutable-state-invariant';

const store = createStore(rootReducer, applyMiddleware(invariant()));

Teraz za każdym razem kiedy przypadkowo zmutujemy stan w reducerze, np:

const initialState = {
  value: 0
};

const reducer = (state = initialState, action) => {
  if (action.type === 'INCREMENT') {
    state.value = state.value + 1;
  }

  return state;
}

otrzymamy w konsoli komunikat błędu:

Error: A state mutation was detected inside a dispatch, in the path: `value`. 
Take a look at the reducer(s) handling the action {"type":"INCREMENT"}.

Pamiętaj o wyłączeniu middleware redux-immutable-state-invariant w buildach produkcyjnych!

← redux-thunkNiemutowalne aktualizowanie stanu →
Bartosz Szczeciński © 2019 Materiał dostępny na zasadach licencji MIT.