React-Redux: добавить пользовательский третий параметр в mapStateToProps - возможно, connectAdvanced?
У меня есть приложение, использующее React и Redux.
Некоторые части моей модели данных потенциально ленивы, поэтому общий шаблон при чтении данных из состояния redux: поиск, если ленивые данные уже загружены, если нет, отправьте действие ReduxThunk, которое извлекает данные.
Чтобы иметь возможность запускать этот процесс в mapStateToProps, я хочу реализовать собственную функцию подключения, которая передает функцию разрешения в качестве третьего параметра в mapStateToProps. Эта функция разрешения должна иметь доступ к отправке, чтобы я мог инициировать загрузку ленивых данных ReduxThunk-действием. Моя функция mapStateToProps должна выглядеть так:
const mapStateToProps = (state, ownProps, resolve) => {
var myData;
if (state.potentiallyLazy instanceof LazyLink) {
resolve(state.potentiallyLazy);
}
else {
myData = state.potentiallyLazy;
}
return {
myData
}
}
Любая помощь, как этого добиться, или подсказка для другого подхода? Я посмотрел на connectAdvanced (), но на самом деле не нашел решения.
Ответы 2
Вы можете расширить HOC подключения, чтобы добавить функцию разрешения, например
export connectAdvanced = (...args) => {
const resolve = () => {} // your resolve function here
const [mapStateToProps] = args;
const overridenMapStateToProps = (state, ownProps) => {
mapStateToProps(state, ownProps, resolve)
}
const restParams = [overridenMapStateToProps, ...args.slice(1)];
return (Component) => connect.apply(null, restParms)(Component);
}
и используйте это как
const mapStateToProps = (state, ownProps, resolve) => {
var myData;
if (state.potentiallyLazy instanceof LazyLink) {
resolve(state.potentiallyLazy);
}
else {
myData = state.potentiallyLazy;
}
return {
myData
}
}
export default connectAdvanced(mapStateToProps)(App);
Однако этот подход больше не сохраняет вашу функцию mapStateToProps чистой, и вам следует подумать о перемещении ленивого действия загрузки в методы жизненного цикла, что является лучшим и правильным способом сделать это.
Это плохая идея на нескольких уровнях.
Во-первых, ваши функции долженmapState должны быть чистыми, синхронными и не иметь побочных эффектов, как и ваши редукторы.
Во-вторых, похоже, что вы храните экземпляры классов в состоянии вашего хранилища, что не рекомендуется, потому что это нарушит отладку путешествий во времени.
Если вам нужно инициировать поведение загрузки, я бы предложил поместить его внутри компонент в методы жизненного цикла.