Najlepsza praktyka do wielokrotnego użytku obliczenia danych w sklepie redux

Question

Właśnie zakończyłem okablowanie aplikacji redux i jest fantastyczna do tej pory. Ponieważ jednak stan jest przechowywany w gigantycznym sklepie, nie masz żadnych modeli, z których uzyskujesz dostęp do swoich danych.

Załóżmy, że mam klasę modelu, która przechowuje pewne informacje o użytkowniku. Zwykle dodawałem funkcję do klasy o nazwie display_name, która inteligentnie łączy różne części ich nazwy. Dzięki temu moje różne poglądy mogłyby po prostu zadzwonić pod numer display_name zamiast do nich, aby dowiedzieć się, jak sami je obliczyć.

Redux jawnie twierdzi, że nie przechowuje wartości obliczonych w stanie, więc pozostawia je do zdefiniowania w komponentach. Nie może to być jednak słuszne, ponieważ wtedy zduplikowałbyś ten kod w każdym komponencie, który tego potrzebuje.

Gdzie jest właściwe miejsce do przechowywania tej logiki?

Answer 1

Najprostszym sposobem jest tworzenie funkcji użytkowych w celu obliczenia te dane i umieścić je w osobny moduł, który może być wykorzystany przez mapStateToProps funkcji wielu składników. A Przykład super prosta:

import { displayName } from "./utils"; 

function mapStateToProps(state) { 
    return { 
    displayName: displayName(state.user) 
    }; 
} 

function MyComponent(props) { 
    return <div>Name: {props.displayName}</div>; 
} 

export default connect(mapStateToProps)(MyComponent); 

Answer 2

Na stronie Computing Derived Data w docs Redux, proponowane podejście wykorzystuje bibliotekę Reselect do obsługi wybór i memoization.

W przypadku wyszukiwania projektów Github dla JavaScript zawierających wyrażenie "createSelector", należy znaleźć wiele rzeczywistych aplikacji, które używają ponownego wyboru na różne sposoby. Oto trzy, które pojawiły się: jfurrow/flood, FH-Potsdam/shifted maps i madou/GW2 Armory