无法读取未定义的属性“类型”-Redux

Question

我正在尝试调度一个动作，但是它返回undefined的“类型”。我怀疑Redux Thunk无法正常工作。

在我从父组件分派相同的操作之前，它就起作用了。

入口

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../ConfigureStore'
import '../App.css';
import App from './theapp/theAppContainer';

const store = configureStore()

class Root extends Component {
	render() {
		return (
			<Provider store={store}>
                <App />
            </Provider>
		)
	}
}

export default Root;

商店

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import allReducers from './reducers/index'

const loggerMiddleware = createLogger()

export default function configureStore() {
	return createStore(
		allReducers,
		applyMiddleware(thunkMiddleware, loggerMiddleware)
	)
}

应用-路由。在我在此级别分派操作之前，它一直在起作用。

import React, { Component } from 'react'
import Cards from '../templates/cards/CardsContainer'
import EditApp from '../pages/editApp/EditApp'
import NewApp from '../pages/NewApp'
import AppReport from '../pages/AppReport'
import { Route, Switch, HashRouter } from 'react-router-dom'

export default class TheApp extends Component {

	constructor(props) {
		super(props)
	}

	render() {

		const appId = window.location.href.split('id=')[1];

		return (
			<HashRouter>
				<Switch>
					<Route exact path="/" component={Cards} />
					<Route path="/app" component={EditApp} />
					<Route exact path="/new" component={NewApp} />
					<Route path="/report" component={AppReport} />
				</Switch>
			</HashRouter>
		)
	}
}

我在其中分派动作的容器

import { connect } from 'react-redux'
import Cards from './Cards'
import {
	fetchAppsData
  } from '../../../actions'

function mapStateToProps(state){
    return {
        apps: state.apps
    }
}

function matchDispatchToProps(dispatch){
    return dispatch(fetchAppsData)
}

export default connect(mapStateToProps, matchDispatchToProps)(Cards)

动作

import fetch from 'cross-fetch'
import * as helpers from '../Helpers';
export const REQUEST_ITEMS = 'REQUEST_ITEMS'
export const RECEIVE_ITEMS = 'RECEIVE_ITEMS'

export function fetchAppsData() {
	return (dispatch) => {
		return dispatch(fetchItems())
	}
}

function fetchItems() {
	return dispatch => {
		dispatch(requestItems())
		return fetch(helpers.appData)
			.then(response => response.json())
			.then(json => dispatch(receiveItems(json)))
	}
}

function requestItems() {
	return {
		type: REQUEST_ITEMS
	}
}

function receiveItems(json) {
	return {
		type: RECEIVE_ITEMS,
		items: json,
		receivedAt: Date.now()
	}
}

减速器

import {
    REQUEST_ITEMS,
    RECEIVE_ITEMS
  } from '../actions/apps-actions'
  
export default function apps(
	state = {
		isFetching: false,
		items: []
	},
	action
) {
	switch (action.type) {
		case REQUEST_ITEMS:
			return Object.assign({}, state, {
				isFetching: true
			})
		case RECEIVE_ITEMS:
			return Object.assign({}, state, {
				isFetching: false,
				items: action.items
			})
		default:
			return state
	}
}

Answer 1

尝试更改

function matchDispatchToProps(dispatch){
    return dispatch(fetchAppsData)
}

对此：

   function matchDispatchToProps(dispatch){
        return {
            fetchAppsData: () => dispatch(fetchAppsData())
        }
    }

该函数也应称为“ mapDispatchToProps”，但这对您的问题并不重要。

Answer 2

I believe calling

dispatch(fetchAppsData)

isn't correct, fetchAppsData is a thunk creator, not a thunk directly. Instead you would want to do

dispatch(fetchAppsData())