реагировать на редуксы mapStateToProps - исправлять реквизиты, не доходя до компонента - PullRequest
0 голосов
/ 17 декабря 2018

У меня есть компонент OnePayrunGridContainer, обернутый в connect Component реагирующего с редуксом.

Существует два различных асинхронных действия, которые обновляют хранилище с избыточностью -

  1. FETCH_PAYRUN_TS_DETAILS - чтобы получить все данные после загрузки компонента
  2. FETCH_TIMESLIP_DATA - который обновляет state.timeslipInModal

Когда в timeslipInModal есть объект, мой рендерфункция отображает его в модальном режиме.

В инструментах реагирования в chrome и firefox я вижу вывод console.log, демонстрирующий, что хранилище редуксов обновлено, вызывается mapStateToProps, но когда я проверяюДля компонента в консоли реагирования пропеллер timeslipInModal остается false - это начальное значение при первом отображении компонента.


Документация react-redux для mapStateToProps говорит -

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

, что происходит (я знаю это по console.log в mapStateToProps).


В документации также сказано -

Результаты mapStateToProps должны быть простым объектом, который будет объединен с подпорками компонента.

Эта частьэто то, что не происходит.* * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * [10] * * * * * * * * * * * *} * [1050] * * * * * * * * * * * * * * * * * [1052] * * * * * * * * * * * * * * * * * [1050] * * * * * * * * * * * * * * * * * * * * * [10] [*]функция mapStateToProps представляет собой простой объект, но этот объект НЕ объединяется в подпорки дочернего компонента - это показано на следующем снимке экрана:

disconnect between value in mapStateToProps and the component's props

Вот код, который показывает, что I console.log(props.timeslipInModal), который не является ложным в консоли, но реквизит обернутого компонента не изменяется.

const mapStateToProps = (state) => {
    let props = {
        userIdBy: false,
        apiToken: false
    };
    props.timeslipInModal = state.timeslipInModal ? state.timeslipInModal : false;
    if (state && state.myBus) {
        if (state.myBus.payrun) {
            // state.myBus.payrun.loading, loaded and errors copied by this
            props = Object.assign(state.myBus.payrun, props);
        }
        if (state.myBus.common && state.myBus.common.auth) {
            props.userIdBy = state.myBus.common.auth.userId;
            props.apiToken = state.myBus.common.auth.apiToken;
        }
    }
    console.log('timeslipInModal at the end of mapStateToProps:', props.timeslipInModal);
    return props;
};
const mapDispatchToProps = (dispatch, ownProps) => ({
    dispatch,
    fetchPayrunDetails:
        dispatch(fetchPayrunDetails(ownProps.userIdBy, ownProps.apiToken, ownProps.entityId))
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(OnePayrunGridContainer);

Мой редуктор для fetchPayrunDetails выглядит так:

case 'FETCH_PAYRUN_TS_DETAILS_FULFILLED': {
    const newState = Object.assign({}, state);
    newState.myBus = Object.assign({}, state.myBus);
    newState.myBus.payrun = action.payload.data.data;
    newState.myBus.payrun.loading = false;
    newState.myBus.payrun.loaded = true;
    newState.myBus.payrun.errors = false;
    return newState;
}

My Reducer для обновления reactStore.timeslipInModal - это отдельный случай в reducer.js:

case 'FETCH_TIMESLIP_DATA_FULFILLED': {
    if (action.payload.data.errors) {
        // caputure errors - not relevant here
    }
    const newState = Object.assign({}, state, {
        modalFetchErrors: false,
        modalFetched: true,
        modalFetching: false,
        modalValidating: false,
        timeslipInModal: action.payload.data.timeslip
    });
    return newState;
}

Одна вещь, котораянемного «другой» и, следовательно, может быть проблемой - в моем скрипте entry.js у меня есть цикл, где я ищу html-сущности по их идентификатору, и на основании их идентификатора я вызываю правильный компонент для рендеринга.

Это позволяет мне вызывать один entry.js скрипт в конце моего общего представления шаблона.

import OnePayrunGridContainer from './components/payrun/OnePayrunGridContainer.js';
import {Provider} from 'react-redux';
import store from './store.js';
// put these in here so they match code searches - these container components
// are included below by Alias so explicitly list them here: <OnePayrunGridContainer>
let componentNamesByRootElementIds = {
    onePayrunGridMyBus: OnePayrunGridContainer
};
let htmlElement = false;
for (let onereactElementId in componentNamesByRootElementIds) {
    htmlElement = document.getElementById(onereactElementId);
    if (htmlElement) {
        let Component = componentNamesByRootElementIds[onereactElementId];
        ReactDOM.render(
            <Provider store={store}>
                <Component
                    userIdBy={userIdBy}
                    apiToken={apiToken}
                    entityId={entityId}
                    onereactElementId={onereactElementId}
                />
            </Provider>,
            htmlElement
        );
    }
}

Кроме того, я экспортирую connect в мой OnePayrunGridContainer.js:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OnePayrunGridContainer)

Все остальные реквизиты обновляются после выполнения вызовов FETCH_PAYRUN_TS_DETAILS_FULFILLED, которые обновляют хранилище избыточности - чтоя скучаю?Как сделать так, чтобы реквизиты обернутого компонента обновлялись корректно , когда состояние избыточности обновляется действием FETCH_TIMESLIP_DATA_FULFILLED?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...