szczecinski.eu

szczecinski.eu

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

›Użycie z React

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

mapStateToProps

Pierwszym argumentem, jaki zwyczajowo przekazujemy do connect() jest funkcja, której zadaniem jest mapowanie stanu reduxa na propsy komponentu - z tego też powodu nazywamy ją mapStateToProps (oczywiście to jak nazwiesz swoją funkcję, zależy tylko i wyłącznie od Ciebie, możesz też użyć anonimowej funkcji i przesłać ją bezpośrednio jako argument).

const mapStateToProps = (state) => {
  console.log(state);
  return state;
}

Jeżeli przypomnimy sobie kształt naszego store z sekcji Wiele reducerów, wiemy, że efektem będzie:

{
  counter: 0,
  hello: 0
}

Nasz komponent nie jest zainteresowany informacją hello a jedynie counter. Możemy to zapisać jako:

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
};

const App = (props) => (
  <div>
    <button onClick={() => {
      dispatch({
        type: 'CLICK'
      })
    }}>Kliknięto {props.counter} razy</button>
  </div>
);

const ConnectedApp = connect(mapStateToProps)(App);

W ten sposób nasz komponent otrzymuje tylko i wyłącznie informacje zapisane w store.getState().counter. Żadne inne informacje go nie interesują i ich zmiana nie spowoduje re-renderowania się komponentu. W celu stworzenia poprawnej architektury komponentu powinniśmy zadbać o to, by mapStateToProps tak poinstruowało connect by do komponentu trafił tylko te informacje, które go interesują.

ownProps

mapStateToProps wywoływany jest z drugim parametrem, który stanowi odzwierciedlenie propsów jakie otrzymał nasz komponent od swojego rodzica. Jeżeli założymy następującą strukturę:

ReactDOM.render(
  <ConnectedApp instanceId={42} />
);

Komponent App otrzyma propsy:

  • counter przekazany z Reduxa za pomocą connect i mapStateToProps
  • dispatch przekazany z Reduxa za pomocą connect
  • instanceId przekazany przez ReactDOM.render()

Zaś sama funkcja mapStateToProps otrzyma jako drugi argument obiekt:

{
  instanceId: 42
}

Mechanizm ten przydaje się wszędzie tam, gdzie nie interesuje nas całość informacji przechowywanych w Reduxcie ale jedynie jej podzbiór - np. w celu sortowania, filtrowania etc. Więcej na ten temat dowiesz się z sekcji Selektory.

← connectmapDispatchToProps →
  • ownProps
Bartosz Szczeciński © 2019 Materiał dostępny na zasadach licencji MIT.