时间戳

首页 > 解决方案 > 无法读取未定义的属性“类型”-redux

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

问题描述

我正在尝试调度一个动作，但它返回“类型”的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
	}
}

标签： javascriptreactjsreact-redux

解决方案

我相信打电话

dispatch(fetchAppsData)

不正确，fetchAppsData是一个 thunk 创建者，而不是直接的 thunk。相反，你想做

dispatch(fetchAppsData())

推荐阅读