这是我的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')
);
然后,这是我的行动,我获取数据&amp;然后用它创建一个动作:
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
&amp; 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())
);
}
这是我的合并减速器:
import {combineReducers} from 'redux';
import courses from './courseReducer';
import locations from './locationReducer';
const rootReducer = combineReducers({
courses,
locations
});
export default rootReducer;
我没有将它正确连接到商店吗?
最近更新:
在JSON.stringify(state)
中记录mapStateToProps
实际上会显示结果。谢谢你们。
正确的路径原来是state.locations.listingData
因为我认为在我的合并缩减器中我将缩减器包含为locations
所以也许这就是为什么它的状态是state.locations
。希望这有助于解决问题的任何人。
答案 0 :(得分:2)
dispatch(loadLocationListSuccess(json));
之前记录了数据?UPD:
因为rootReducer。每个reducer都会在商店中创建自己的密钥。在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
});