无法从 Redux 存储读取状态。我错过了什么？

Question

这是我的index.js，我最初在其中发送一个操作来读取我的位置列表：

import 'babel-polyfill';
import React from 'react';
import { render } from  'react-dom';
import configureStore from './store/configureStore';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import {loadLocationList} from './actions/locationActions';
import './css/styles.css';

const store = configureStore();

render(
    <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
    </Provider>,
    document.getElementById('app')
);

然后这是我的操作，我在其中获取数据，然后从中创建一个操作：

export function loadLocationListSuccess(alistingData) {
    return { type: types.LOAD_LOCATION_LIST_SUCCESS, listingData: alistingData};
}

export function loadLocationList() {
        return function(dispatch){ //we return a function that accepts a parameter, we just called it dispatch
            //dispatch(fetchCallActions.fetchCallStart("")); // we dispatch a function fetchCallStart to indicate the start of our call, this is to keep in check with our asynchronous function calls
            let link = 'http://example.com:8399/location';//our fetch url
            console.log(link); //we log our link, just for debug purposes

            return fetch(link) //start fetch
            .then(function(response) {
                return response.json();
            }).then(function(json) {
                dispatch(loadLocationListSuccess(json));
            }).catch(function(ex) {
                console.log('parsing failed', ex);

            });
        };
    }

那么这是我的减速器：

import * as types from '../actions/actionTypes';

export default function locationReducer(state = [], action) {
    switch(action.type) {
        case types.LOAD_LOCATION_LIST_SUCCESS:
            return {listingData: action.listingData};
        default:
            return state;
    }
}

然后这是我的 mapStateToProps & connect 函数：

    function mapStateToProps(state, ownProps) {
      return {
        // we'll call this in our component -> this.props.listingData
        listingData: state.listingData
      };
    }

export default connect(mapStateToProps, mapDispatchToProps)(homePage);

出于某种原因，它无法读取 state.listingData 还是我实际上做错了？谁能帮我解决这个问题？

我尝试记录 state.listingData，它显示 undefined

这是我的 configureStore:

import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, reduxImmutableStateInvariant())
    );
}

这是我的组合 Reducer：

import {combineReducers} from 'redux';
import courses from './courseReducer';
import locations from './locationReducer';

const rootReducer = combineReducers({
    courses,
    locations
});


export default rootReducer;

我没有正确连接到商店吗？

最近更新：在 mapStateToProps 中记录 JSON.stringify(state) 实际上会显示结果。谢谢大家。

正确的路径原来是 state.locations.listingData 因为我认为在我的组合 Reducer 中我将减速器包含为 locations 所以也许这就是为什么它的状态是 state.locations。希望这可以帮助任何人解决问题。

Answer 1

你能展示一下configureStore文件的代码吗？问题可能在那里，可能是您忘记将减速器添加到减速器列表中。
操作是否正确？您是否在 dispatch(loadLocationListSuccess(json)); 之前记录数据？

更新：

因为 rootReducer。每个 reducer 在 store 中创建自己的密钥。当你在 rootReducer 中组合你的 reducer 时，比如：

import locations from './locationReducer';
const rootReducer = combineReducers({
    courses,
    locations
});

它创建具有这种结构的商店：

const store = {
    courses: {},
    locations: {}
}

因此，在您发送 action 和 reducer 之后将数据更改为：

const store = {
    courses: {},
    locations: {
       listingData: someData
    }
}

如果你想像这样访问 listingData：state.listingData，你需要稍微改变你的 reducer 和 combineReducer 到：

export default function listingData(state = {}, action) {
    switch(action.type) {
        case types.LOAD_LOCATION_LIST_SUCCESS:
            return action.listingData;
        default:
            return state;
    }
}

...

import listingData from './locationReducer';
const rootReducer = combineReducers({
    courses,
    listingData
});

无法从 Redux 存储读取状态。我错过了什么？

Cannot read state from Redux store. What did I miss?

javascript

reactjs

redux

react-redux