[英]Cannot read property 'type' of undefined in Redux
i'm write react functional component, which should get some data from server.我正在编写反应功能组件,它应该从服务器获取一些数据。 I'm use redux, but i get an error "Cannot read property 'type' of undefined"
我正在使用 redux,但出现错误“无法读取未定义的属性‘类型’”
Help me please find my mistake帮助我,请找出我的错误
This is my react component, Products.js.这是我的反应组件 Products.js。 I think there may be errors in the export part.
我认为导出部分可能存在错误。 Also parent component Products.js (App.js) has wrapped on Provider
父组件 Products.js (App.js) 也包裹在 Provider 上
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchProducts } from '../actions/productActions';
import { productsReducer } from '../reducers/productReducers'
function Products({ store, products, cartItems, setCartItems }) {
useEffect(() => {
store.dispatch(productsReducer())
})
const [product, setProduct] = useState(null);
return (
<div>
{
!products
? (<div>Loading...</div>)
:
(<ul className="products">
{products.map(product => (
<li key={product._id}>
<div className="product">
<a href={"#" + product._id}>
<img src={product.image} alt={product.title} />
<p>{product.title}</p>
</a>
<div className="product-price">
<div>${product.price}</div>
<button>Add To Cart</button>
</div>
</div>
</li>
))}
</ul>)
}
</div >
)
}
export default connect((state) => ({ products: state.products.items }), {
fetchProducts,
})(Products);
This is my store.js这是我的 store.js
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { productsReducer } from './reducers/productReducers';
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
combineReducers({
products: productsReducer,
}),
initialState,
composeEnhancer(applyMiddleware(thunk))
)
export default store;
My reducer, and I am getting error in this file (Cannot read property 'type' of undefined), maybe, I making a transmission error 'action'我的减速器,我在这个文件中遇到错误(无法读取未定义的属性“类型”),也许,我在传输错误“操作”
import { FETCH_PRODUCTS } from "../types";
export const productsReducer = (state = {}, action) => {
switch (action.type) {
case FETCH_PRODUCTS:
console.log('it work!')
return { items: action.payload };
default:
return state;
}
};
My Action我的行动
import { FETCH_PRODUCTS } from "../types";
export const fetchProducts = () => async (dispatch) => {
const res = await fetch("/api/products");
const data = await res.json();
console.log(data);
dispatch({
type: FETCH_PRODUCTS,
payload: data,
});
};
and my Types和我的类型
export const FETCH_PRODUCTS = "FETCH_PRODUCTS"
This is are study project on redux, but in original teacher writte code on class component.这是关于 redux 的研究项目,但在 class 组件上的原始教师编写代码中。 Original code here and here
原始代码在这里和这里
If i write class component like on source, everything is working, so i think this is a reason of mistake如果我像源代码一样编写 class 组件,一切正常,所以我认为这是错误的原因
dispatch
function expects redux action as an argument, not reducer. dispatch
function 期望 redux 动作作为参数,而不是减速器。 In your case:在你的情况下:
import { fetchProducts } from '../actions/productActions';
function Products({ store, products, cartItems, setCartItems }) {
useEffect(() => {
store.dispatch(fetchProducts());
})
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.