Я работаю с приложением React с Redux и React-Router
Например, у меня 6 миллионов страниц профиля
/id1
/id2
...
/id6000000
и все они должны быть нарисованы компонентом ProfilePage.
так что я просто делаю что-то вроде:
class ProfilePage extends Component {
componentDidMount() {
httpApi.getProfileData(this.props.match.params.id)
.then(response => {
this.setState({
page: response
})
})
}
...
}
Отлично работает.
Но затем я хочу использовать Redux для тех же целей (я вызову dispatch напрямую для удобства чтения).
Также мы должны понимать, что нам не нужны данные страницы в глобальном хранилище, за исключением использования подключенных реквизитов в базовых компонентах (мы можем легко заменить их на createContext). Мы просто используем Redux для перемещения логики и запросов в космическом пространстве.
class ProfilePage extends Component {
static propTypes = {
page: propTypes.object // from connect
}
componentDidMount() {
dispatch({type: 'PROFILEPAGE_LOADING_START', id: this.props.match.params.id});
}
...
}
, который после промежуточного программного обеспечения вызывает редуктор и устанавливает хранилище:
PROFILEPAGE_LOADING_SUCCESS:
return {
profilePage: action.page
}
Так что я думаю, что теперь все работает отлично, кроме одной вещи.
Например, мы остаемся на странице профиля с id1 и идем к id3, наш реакционный маршрутизатор размонтирует profilePage [id1] и монтирует
profilePage [id3] и его рендеринг со старыми данными [id1] перед загрузкой новых данных, потому что мы не удаляем старые данные из хранилища. Хм.
Я понимаю, что мы можем реализовать ключи страницы или состояние загрузки или состояние очистки в componentDidMount (но он по-прежнему отображается со старыми данными перед подключением)
что-то еще, но это немного некрасиво и имеет побочные эффекты.
Вопрос: Какая лучшая практика?
И, во-вторых, если я хочу реализовать предварительную загрузку данных при нажатии ссылки перед отправкой истории.
Его очень легко реализовать без Redux, просто используйте состояние push истории и используйте это состояние в componentDidMount.
Но если я использую Redux, то это АБСОЛЮТНО УЖАСНАЯ вещь.
Во-первых, мне нужно решить первый вопрос любым уродливым способом, а во-вторых, мне нужно каким-то образом объединить изменения данных в хранилище и отрендерить с помощью реагирующего маршрутизатора. В противном случае необходимо реализовать логику shouldComponentUpdate, которая тоже некрасива и в некоторых случаях не срабатывает.
Я перепробовал много решений, и они работают, но все ужасно чертовски.
Вопрос 2: Какое решение?