Question

我正在从mongo api中提取数据。我可以在action.log中操作数据，但是我无法将它映射到组件道具。我只看到一个空数组。我是新来的反应和减少所以它可能是一些简单的我误解。除了我的问题和其他关于此的良好读物的链接，你会建议会是惊人的:)非常感谢你们！

StoreLoader组件

#define

我的行动指数

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

Answer 1

在你的rootReducer你的行动案例

case SET_STORES:
    return action.items

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

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

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

React / Redux - mapStateToProps

1 个答案: