React/Redux - mapStateToProps

Question

Ich ziehe Daten in meiner Aktion von einem Mongo API. Ich kann console.log die Daten in der Aktion, aber ich kann es nicht zu den Komponenten Requisiten zuordnen. Ich sehe nur ein leeres Array. Ich bin neu zu reagieren und Redux, also ist es wahrscheinlich etwas Einfaches, das ich falsch verstehe. Abgesehen von meiner Frage und anderen Links zu guten Lektüre über diese würden Sie empfehlen, wäre erstaunlich :) Vielen Dank Jungs!

StoreLoader Komponente

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) 

Meine Aktionen Index

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)) 
      }) 
    } 
} 

Mein Reducers Index

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

In Ihrem rootReducer Ihre Aktion Fall

case SET_STORES: 
    return action.items 

nichts oben auf den Zustand eingestellt. Sie gibt die Daten Ihrer Aktion zurück, fügt sie jedoch nicht zum Redux-Statusbaum hinzu.

Sie, dass SET_STORE Fall brauchen wie diese

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