React / Redux - mapStateToProps答案

【问题标题】：React / Redux - mapStateToPropsReact / Redux - mapStateToProps
【发布时间】：2017-09-22 22:00:42
【问题描述】：

我正在从 mongo api 中提取数据。我可以 console.log 操作中的数据，但我无法将其映射到组件道具。我只看到一个空数组。我是 react 和 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

【问题讨论】：

console.log(this.props.data) 中的 componentWillMount 是什么在这里给你一个空数组？如果是这种情况，很可能是因为 loadStoresFromServer() 是异步的，并且您正试图在结果从服务器返回之前打印结果。
我现在的脸很用力....谢谢！
它发生的频率比我想承认的要多。安装 Redux Devtools 或 Redux Logger 总是很方便的，这样您就可以查看状态并在更新时收到通知，而不是指望正确安排日志。他们非常非常有帮助。
我会试试这些。感谢您的帮助！

标签： javascript reactjs redux react-router

【解决方案1】：

在你的 rootReducer 你的行动案例

case SET_STORES:
    return action.items

不在状态之上设置任何东西。它正在返回您的操作数据，但不会添加到 redux 状态树。

您需要 SET_STORE 案例才能像这样运行

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

【讨论】：

这是 LOAD_STORES 案例，所以它正在做，我可以删除 SET_STORES。那是我正在尝试的其他事情。谢谢！ case LOAD_STORES: return {...state, data: action.items }
您的问题解决了吗@SirFry ？如果是，请选择此回复作为您的正确答案。否则人们可能会尝试为已解决的问题找到解决方案
是的，但已由在帖子下方发表评论的人 DillGromble 解决。