Каковы причины отличия состояния хранилища React-redux и состояния mapStateToProps?

Question

Я попадаю в ситуацию, когда при отправке действия состояние хранилища меняется, как и должно, но состояние обратного вызова моих подключенных компонентов mapStateToProps не отражает новые изменения в хранилище.

Чтомогут быть причины этого?

configureStore.js

export default () => {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(
        combineReducers({
            concepts: conceptReducer,
            conceptModal: conceptModalReducer,
            cards: cardReducer,
            cardModal: cardModalReducer,
        }),
        composeEnhancers(applyMiddleware(queryApi))
    );

    store.subscribe(() => {
        console.log('store notification:', store.getState());
    })

    return store;
};

Reducer.js

case "UPDATE_CONCEPT_SUCCESS": {
    let concepts = [...state.data].map((concept) => {
        if (concept.id === action.id) {
            return { ...concept, ...action.concept };
        }
        return concept;
    });

    /* Even with return below, mapStateToProps state parameter still returns the old state */
    // return {'data': [{id:1},{id:2}]}
    return { ...state, pending: false, lastErrorCode: null, lastErrorMessage: null, data: concepts };
    break;
}

CardModal.js

export default connect((state, p) => (() => {
    // the console.log below returns the old state
    console.log('connect called', state);

    return ({
        isThemeDark: state.common.isThemeDark,

        allConceptsData: allConcepts(state.concepts.data),
        conceptsData: allConceptsForTopicId(state.concepts.data, state.cardModal.topicId),
    })
}))(CardModal);

Answer 1

Ваш mapStateToProps возвращает функцию, а не новое состояние.

Попробуйте вместо этого:

export default connect((state, p) => {

  // the console.log below returns the old state
  console.log('connect called', state);

  return {
    isThemeDark: state.common.isThemeDark,

    allConceptsData: allConcepts(state.concepts.data),
    conceptsData: allConceptsForTopicId(state.concepts.data, state.cardModal.topicId),
  };
}))(CardModal);