在新的 Reducer 中未定义状态答案

【问题标题】：State undefined in new Reducer在新的 Reducer 中未定义状态
【发布时间】：2019-08-02 23:15:39
【问题描述】：

我正在尝试创建一个新的减速器，遵循当前构建中其他代码的格式，并且在新的减速器中状态为未定义。

当我尝试 console.log(this.props) 时，我尝试传入的状态没有出现（即没有任何涉及 choroplethData）。

// the new reducer file reducers/chart.js
import * as CONSTANTS from '../constants/charts';

const initialState = {
    choroplethData: {
        data: {},
        error: '',
        loading: false,
    },
} // end of initialState

export default (state = initialState, action => {
    switch(action.type) {

        case CONSTANTS.GET_CHOROPLETH_DATA_REQUEST:
            return {
                ...state,
                choroplethData: {
                    ...state.choroplethData,
                    loading: true,
                },
            }
        case CONSTANTS.GET_CHOROPLETH_DATA_SUCCESS:
            return {
                ...state,
                choroplethData: {
                    ...state.choroplethData,
                    data: action,
                    loading: false,
                },
            }
        case CONSTANTS.GET_CHOROPLETH_DATA_ERROR:
            return {
                ...state,
                choroplethData: {
                    ...state.choroplethData,
                    error: action.error,
                },
            }

        default:
            return state
    } // end of switch(action.type)
}) // end of export default (state = initialState, action)

// reducers/index.js
import { combineReducers } from 'redux';

...
import chartsReducer from './charts';

export default combineReducers({
  ...
  charts: chartsReducer,
});

// Charts/index.js
import { connect } from 'react-redux';
import Choropleth from './Choropleth';
import './Choropleth.css';
import {
    getChoroplethDataRequest,
} from '../../redux/actions/charts';

const mapStateToProps = state => ({
    choroplethData: state.choroplethData,
})

const mapDispatchToProps = {
    getChoroplethDataRequest,
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Choropleth)

// configureStore.js
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import createHistory from 'history/createBrowserHistory';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import rootReducer from './redux/reducers';
import sagas from './redux/sagas';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const history = createHistory();
const devToolsOptions = {
    trace: true,
};
const composeEnhancers = composeWithDevTools(devToolsOptions);

const sagaMiddleware = createSagaMiddleware();

const middleware = [routerMiddleware(history), sagaMiddleware];

const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(...middleware)),
);

const persistor = persistStore(store);

sagaMiddleware.run(sagas);

export default { store, persistor };

我的目标是拥有一个名为 Choropleth 的类组件，然后我可以将其发送到一个或多个其他类组件。如果我可以将所有 choropleth（和其他图表）功能隔离到它们的特定类组件，包括它们的动作/观察者/减速器，那就太好了。

【问题讨论】：

标签： javascript reactjs redux redux-saga

【解决方案1】：

在 Charts/index.js 中，使用 state.charts.choroplethData 而不是 state.choroplethData。正如您最初在 reducers/index.js 中将该状态定义为 charts

【讨论】：

我按照你的建议做了，但它仍然出现，因为我的 chart.js 减速器文件中没有定义“状态”。
另外通知，在configureStore.js，可以将export语句改为export default ({ store, persistor });

【解决方案2】：

在Carts/index.js 文件中，您应该更改mapStateToProps 函数

const mapStateToProps = state => ({
    choroplethData: state.charts.choroplethData,
})
``

【讨论】：