我从mongo api中抽取我的行为中的数据。我可以在操作中使用console.log数据,但我无法将其映射到组件道具。我只看到一个空阵列。我是新来的反应和redux,所以这可能是简单的我误解。除了我的问题和其他有关这个好读的链接,你会建议将是惊人的:)谢谢吨家伙!React/Redux - mapStateToProps
StoreLoader组件
import React, { Component } from 'react'
import { connect } from 'react-redux'
import storeData from '../data/storeData'
import { loadStoresFromServer } from '../actions'
class StoreLoader extends Component {
componentWillMount() {
this.props.dispatch(loadStoresFromServer())
console.log(this.props.data)
}
loadStores() {
return (
<div className="row loaderContainer">
{
storeData.map(item => {
return(
<div key={item.store} className="col-lg-3 col-md-3 col-sm-6 cardContainer">
<div className="card">
<div className="card-block">
<h3 className="card-title"> { item.store } </h3>
<p className="card-text"> { item.storeName } </p>
<p className="card-text"> Open Date: { item.openDate } </p>
<div className="cardStatus">
Status
<div className="statusCircle circleFill"/>
</div>
<a className="btn btn-outline-secondary viewBtn">View</a>
</div>
</div>
</div>
)
})
}
</div>
)
}
render() {
return(
<div>
<div className="loaderContainer">
<h3 className="loaderTitle">Ready For IT
</h3>
{ this.loadStores() }
</div>
<div className="loaderContainer">
<h3 className="loaderTitle">Under Construction</h3>
{ this.loadStores() }
</div>
<div className="loaderContainer">
<h3 className="loaderTitle">Upcoming Stores</h3>
{ this.loadStores() }
</div>
</div>
)
}
}
function mapStateToProps(state) {
return { data: state.stores }
}
export default connect(mapStateToProps)(StoreLoader)
我的行为指数
import axios from 'axios'
export const SET_STORES = 'SET_STORES'
export const LOAD_STORES = 'LOAD_STORES'
export function setStores(items) {
return {
type: SET_STORES,
items
}
}
export function loadStoresFromServer() {
return function(dispatch) {
const ROOT_URL = 'http://localhost:3001/api/stores'
axios.get(ROOT_URL)
.then(res => {
//console.log(res.data)
dispatch(setStores(res.data))
})
}
}
我减速指数
import { combineReducers } from 'redux'
import { SET_STORES, LOAD_STORES } from '../actions'
const rootReducer = combineReducers({
stores
})
function stores(state = [], action) {
switch(action.type) {
case SET_STORES:
return action.items
case LOAD_STORES:
return {...state, data: action.items }
default:
return state
}
}
export default rootReducer
到功能是'的console.log(this.props.data)''在什么componentWillMount'这里给你空数组?如果是这种情况,可能是因为'loadStoresFromServer()'是异步的,并且你试图在结果从服务器回来之前打印结果。 – DillGromble
我现在面对的手掌太难了....谢谢! – SirFry
它比我想承认的更频繁地发生。安装Redux Devtools或Redux Logger总是很方便,因此您可以查看状态并在更新时收到通知,而不是依赖计时日志。他们非常非常有帮助。 – DillGromble