新的Reducer中未定义状态

Question

I'm trying to create a new reducer, following the format of other code in the current build, and state is coming up as undefined within the new reducer.

When I try to console.log(this.props), the state that I am trying to pass in does not appear (ie nothing referring to 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 };

My goal is to have a class component called Choropleth that I can then send to one or more other class components. It would be nice if I could isolate all of the choropleth (and other charts) functionality to their specific class components, including their actions/watchers/reducers.

Answer 1

in Charts/index.js, use state.charts.choroplethData instead of state.choroplethData . As you initial defined that state as charts in reducers/index.js

Answer 2

In Carts/index.js file you should change the mapStateToProps function

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