React, Redux, React-Router?

Question

Вопрос архитектуры приложения. Предположим, что имеется много компонентов (look at the picture) (main) на странице. Что лучше использовать для переключения основных компонентов детей (активные/неактивные)? И страницы (1, 2, 3, далее)? Могу ли я использовать реактивный маршрутизатор для обеих задач? P.S .: Я использую ReactJS для рендеринга

Answer 1

Я бы не использовал реактивный маршрутизатор для фильтрации результатов. Поскольку вы используете Redux, вы можете разделить свои редукторы на главные разделы и сохранить состояние активного/неактивного, а также текущую страницу на каждый раздел в одном магазине.

Answer 2

Я думаю, что на этой странице вам не нужно использовать ретранслятор.

Вы должны контролировать состояние (активные/не активно, 1,2,3, следующего) с помощью редуктора, так же, как показано ниже:

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

И вы можете получить данные, которые вы хотите отобразить на этом страницы из реквизита.

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

Answer 3

Ключ предназначен для использования. Если у вас есть следующие варианты использования:

1. Пользователь скопировать вставить ссылку отфильтрованного результата и страницы и делиться с другими
2. пользователя закладкой отфильтрованной страницей результатов, и вернуться к нему позже.

Тогда, безусловно, я бы сказал, что используйте маршрутизатор.

Вы можете иметь маршрут как это: <Route path="main/:status/:page" component={Main}/>

Тогда объект PARAMS будет впрыскивается в качестве реквизита для вашего главного компонента.

Если пользователь нажимает на кнопки, вы должны использовать push от реактивного маршрутизатора, чтобы изменить маршрут или просто Link от реагирующего маршрутизатора. (вместо использования отправки с сокращением или с использованием this.setState, если вы сохранили его как локальное состояние).

Я думаю, что это не сложнее, чем хранить его с редукцией или локальным состоянием, с дополнительным преимуществом большего числа случаев использования выше.

Answer 4

Если вам нужна прочная и масштабируемая архитектура приложения, я бы предложил использовать стартер.

Викия хорошего стартового комплекта опишет выбранные принципы дизайна.

Один из моих любимых комплектов стартера для объединения с безголовым контентом - React Redux starter kit.