javascript - React-redux 存储状态和 mapStateToProps 状态不同的原因是什么？

Question

我遇到的情况是，当我调度一个 Action 时，store 状态正在改变，但我连接的组件 mapStateToProps 回调状态没有反射(reflect) store 中的新变化。

这可能是什么原因？

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);