2017-09-22 65 views
0

我从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 
+1

到功能是'的console.log(this.props.data)''在什么componentWillMount'这里给你空数组?如果是这种情况,可能是因为'loadStoresFromServer()'是异步的,并且你试图在结果从服务器回来之前打印结果。 – DillGromble

+0

我现在面对的手掌太难了....谢谢! – SirFry

+1

它比我想承认的更频繁地发生。安装Redux Devtools或Redux Logger总是很方便,因此您可以查看状态并在更新时收到通知,而不是依赖计时日志。他们非常非常有帮助。 – DillGromble

回答

0

在你rootReducer你的行动情况

case SET_STORES: 
    return action.items 

不设置的状态上放置任何物品。它正在返回您的动作数据,但它不会添加到redux状态树中。

你将来需要这种SET_STORE情况下,像这样的

case SET_STORES: 
    return Object.assign({}, state, { 
     items: action.items 
    }) 
+0

这是LOAD_STORES的情况,所以它正在做,我可以删除SET_STORES。那是我尝试的其他东西。谢谢! case LOAD_STORES: return {... state,data:action.items} – SirFry

+1

已解决您的问题@SirFry?如果是这样,请选择此答复作为您的正确答案。否则,人们可能会试图找到一个解决方案,解决问题已得到解决 –

+0

这是但DillGromble解决了这个帖子下面评论的人。 – SirFry