React / Redux - mapStateToProps

Question

我从mongo中提取数据。我可以在操作中console.log数据，但无法将其映射到组件道具。我只是看到一个空数组。我是新来的反应和反应，所以这可能是一些简单的事情，我误解了。除了我的问题和其他链接，好的阅读，你会推荐这将是惊人的:)谢谢一个吨的家伙！

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