У меня есть компонент OnePayrunGridContainer
, обернутый в connect
Component реагирующего с редуксом.
Существует два различных асинхронных действия, которые обновляют хранилище с избыточностью -
FETCH_PAYRUN_TS_DETAILS
- чтобы получить все данные после загрузки компонента 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
представляет собой простой объект, но этот объект НЕ объединяется в подпорки дочернего компонента - это показано на следующем снимке экрана:
Вот код, который показывает, что 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
?