从商店访问状态和道具

时间:2021-03-20 06:56:01

标签: reactjs

我刚刚开始,不知道如何从商店正确访问状态和道具。减速器代码是:

import {
    REQUEST_LINKS_PENDING,
    REQUEST_LINKS_SUCCESS,
    REQUEST_LINKS_FAILED
} from './selecttype_constants';

const initialState = {
    isPending: false,
    shelters: [],
    error: '',
};

export const selectShelter = (state=initialState, action) => {
    switch(action.type) {
        case REQUEST_LINKS_PENDING:
            return Object.assign({}, state, {isPending: true});
        case REQUEST_LINKS_SUCCESS:
            return Object.assign({}, state, {shelters: action.payload, isPending: false});
        case REQUEST_LINKS_FAILED:
            return Object.assign({}, state, {error: action.payload, isPending: false});
        default:
            return state;
    }
};

和组件代码是

import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
    return {
        isPending: state.isPending,
        shelters: state.shelters,
    }
}

class SheltersList extends React.Component {

    render() {
        const { isPending, shelters} = this.props;
        if (isPending === false) {
            return (
                <div>
                    { shelters.map(function(shelter) {
                        <option id={shelter.id}>{shelter.name}</option>
                    })}
                </div>
            )
        } else {
            console.log('fetching')
            return (
            <option id='2'> Nahravam Data... </option>
        )}
    }
}

export default connect(mapStateToProps, null)(SheltersList);

访问 isPending 真/假状态和 shelters 数组以将其映射到组件中的正确方法是什么?在 'mapStateToPropsshould I usestate.isPendingandstate.sheltersto access the property the right way or should it bestate.selectShelter.isPendingandstet.selectShelter.shelters? Cause in first case it never loads the shelters to the list and in second case I get an error I get an error thatshelters.map` 是不是函数。

0 个答案:

没有答案