Question

我正在尝试按照当前版本中其他代码的格式创建一个新的reducer，并且在新的reducer中状态未定义。

当我尝试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（和其他图表）功能隔离到其特定的类组件（包括其动作/观察者/还原器），那就太好了。

Answer 1

在Charts / index.js中，使用state.charts.choroplethData代替state.choroplethData。最初在reducers / index.js

中将该状态定义为charts

Answer 2

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

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

新的Reducer中未定义状态

2 个答案: