React/Redux - mapStateToProps

Question

Je tire des données dans mon action à partir d'une API mongo. Je peux consoler.log les données dans l'action mais je ne peux pas l'obtenir pour mapper les composants des accessoires. Je vois juste un tableau vide. Je suis nouveau à réagir et à redoubler donc c'est probablement quelque chose de simple que je suis malentendu. Mis à part ma question et d'autres liens vers de bonnes lectures à ce sujet, vous recommanderiez serait incroyable :) Merci une tonne les gars!

StoreLoader Component

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) 

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

Mon 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

Dans votre rootReducer votre action cas

case SET_STORES: 
    return action.items 

ne définit pas de quoi que ce soit au-dessus de l'état. Il renvoie les données de votre action, mais il n'ajoute pas à l'arborescence d'état redux.

Vous aurez besoin de ce cas SET_STORE pour fonctionner comme ce

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