React-Redux: добавить собственный третий параметр в mapStateToProps - возможно, connectAdvanced? - PullRequest
Новая
       9

React-Redux: добавить собственный третий параметр в mapStateToProps - возможно, connectAdvanced?

0 голосов
/ 02 мая 2018

У меня есть приложение, использующее React и Redux.

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

Чтобы иметь возможность инициировать этот процесс в mapStateToProps, я хочу реализовать собственную функцию соединения, которая передает функцию разрешения в качестве третьего параметра в mapStateToProps. Эта функция разрешения должна иметь доступ к диспетчеризации, чтобы я мог инициировать загрузку отложенных данных в ReduxThunk-action. Моя функция mapStateToProps должна выглядеть так: 

const mapStateToProps = (state, ownProps, resolve) => {

    var myData;

    if (state.potentiallyLazy instanceof LazyLink) {
        resolve(state.potentiallyLazy);
    }
    else {
        myData = state.potentiallyLazy;
    }

    return {
        myData
    }
}

Любая помощь, как этого добиться, или подсказка для другого подхода? Я посмотрел на connectAdvanced (), но не нашел решения с этим.

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Это плохая идея для пары уровней.

Во-первых, ваши mapState функции должны быть чистыми, синхронными и не иметь побочных эффектов, как ваши редукторы.

Во-вторых, похоже, что вы держите экземпляры классов в состоянии вашего магазина, , что не рекомендуется, потому что это нарушит отладку во время путешествия .

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

0 голосов
/ 02 мая 2018

Вы можете расширить соединение 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, и вам следует рассмотреть возможность перемещения действия отложенной загрузки в методах жизненного цикла, что является лучшим и правильным способом сделать это

...