操作有效负载未分派到减速器

Question

使用 react-redux 从我的数据库中获取项目。我的减速器正在从 action 接收 action.type 但不是 action.payload。如此处的 redux 开发人员工具所示： 来自我的数据库 api 的响应正在工作，我已经使用 applyMiddleware 将我的 redux-thunk 应用到我的商店中。

1. Home.js

    import React, { Component } from 'react'    
    import { connect } from 'react-redux'
    import { getAvailableItems } from '../Redux/Actions/ItemAction'
    componentDidMount() {
            this.props.getAvailableItems()
            this.props.fetchPosts()
        }
    
        render() {
            console.log(this.props)
            return (<div></div>)
    }
    
    const mapStateToProps = state => {
        return {
            item : state.item.items
        }
    }
    
    const mapActionsToProps = {
        getAvailableItems,
        fetchPosts
    }
    
    export default connect(mapStateToProps, mapActionsToProps)(Home)

2. ItemAction.js

export const getAvailableItems = () => dispatch => {
    console.log("running itemAction")
    fetch('https://us-central1-firebaselink.cloudfunctions.net/api/items')
        .then(
            (res) => {
                //console.log(res.json())
                res.json()
            })
        .then(data => dispatch(
            {
                type : 'GET_ALL_AVAILABLE_ITEMS',
                payload : data
                //console.log(data)
            }
        ))
        .catch((err) => console.log(err));
    
}

3. itemReducer.jsx

const initState = {
    items : []
}

const itemReducers = (state = initState, action) => {
    //return state;
    console.log(action.type)
    switch(action.type){
        case 'GET_ALL_AVAILABLE_ITEMS':
            console.log("this is the payload : "+action.payload)
            return{
                ...state,
                items: action.payload
            }
        default:
            return state;
    }
}
export default itemReducers;