React, Redux, React-Router?

Question

Kwestia architektury aplikacji. Załóżmy, że na stronie znajduje się wiele komponentów (look at the picture) (sieć zasilająca). Co lepiej użyć, aby przełączyć główne komponenty dla dzieci (aktywne/nieaktywne)? I strony (1, 2, 3, następne)? Czy mogę używać routera reagowania do obu zadań? P.S .: Używam ReactJS do renderowania

Answer 1

Nie użyłbym routera reagowania do filtrowania wyników. Ponieważ używasz Redux, możesz podzielić swoje reduktory na główne sekcje i zachować stan aktywny/nieaktywny, a także bieżącą stronę dla każdej sekcji w jednym sklepie.

Answer 2

Myślę, że nie powinieneś używać routera reagowania na tej stronie.

Należy kontrolować stan (aktywny/nieaktywny, 1,2,3, następny) przez reduktor, tak jak poniżej:

case NEXT_PAGE: 
    return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1}; 

I można uzyskać dane, które mają być wyświetlane na ten strona z rekwizytów.

mapStateToProps(state) { 
    return { 
     list: state.xxx.list, 
     currentPage: state.xxx.page 
     totalPage: state.xxx.total 
    } 
} 

Answer 3

Klucz jest przypadkiem użycia. Jeśli masz następujących przypadkach zastosowanie:

1. Użytkownik skopiować wkleić link przefiltrowanej rezultatu i strony i dzielenia się z innymi
2. użytkownik zakładkę przefiltrowaną stronie wyników, i wrócić do niego później.

Zdecydowanie chciałbym użyć routera reagowania.

Można mieć trasę tak: <Route path="main/:status/:page" component={Main}/>

Następnie obiekt params będzie wstrzykiwany jako rekwizyty do głównego składnika.

Jeśli użytkownik kliknie na przyciski, użyjesz push z routera reagującego, aby zmienić trasę lub po prostu Link z routera. (zamiast używać akcji wysyłkowej przy pomocy redux lub używając this.setState, jeśli zapisałeś jako stan lokalny).

Myślę, że nie jest to trudniejsze niż przechowywanie go w reduxie lub stanie lokalnym, z dodatkową zaletą większej liczby przypadków użycia powyżej.

Answer 4

Jeśli chcesz uzyskać solidną i skalowalną architekturę aplikacji, proponuję użyć starterkita.

Wiki dobrego zestawu startowego opisuje wybrane zasady projektowania.

Jednym z moich ulubionych zestawów startowych do łączenia z bezgłowym backendem jest React Redux starter kit.