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