React/Redux - mapStateToProps

Question

我從mongo api中抽取我的行爲中的數據。我可以在操作中使用console.log數據，但我無法將其映射到組件道具。我只看到一個空陣列。我是新來的反應和redux，所以這可能是簡單的我誤解。除了我的問題和其他有關這個好讀的鏈接，你會建議將是驚人的:)謝謝噸傢伙！

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 

Answer 1

在你rootReducer你的行動情況

case SET_STORES: 
    return action.items 

不設置的狀態上放置任何物品。它正在返回您的動作數據，但它不會添加到redux狀態樹中。

你將來需要這種SET_STORE情況下，像這樣的

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