Я впервые пробую Redux, где ранее использовал React и его систему состояний компонентов. Мой код ниже работает на 100% в его ванильном состоянии компонента реакции, но он не работает, как это должно быть с Redux. К счастью, я знаю природу проблемы, но не знаю, как ее решить. Когда я закомментирую свой «Spinner», который является моим загрузочным GIF, Redux обновляет состояние, и действие выполняется. Мой асинхронный вызов API сделан, и полезная нагрузка получена. Но когда Spinner не закомментирован, он выдает ошибку типа и Cannot read property 'map' of undefined
. Мой редуктор имеет пустой массив в качестве исходного состояния, и я уверен, что все настроено правильно, но, возможно, это мой код компонента.
class Votes extends Component {
componentDidMount() {
this.props.getFoods();
}
render() {
const {error, isLoaded, foods} = this.props;
if (error) {
return <div>Error : {error.message}</div>;
// } else if (!isLoaded) {
// return <Spinner />;
} else {
return (
<div>
<h2>Menu</h2>
<ul>
{foods.map(food=> (
<li key={food._id}>
<div className="description">
<h4>{food.foodname}</h4>
</div>
</li>
))}
</ul>
</div>
);
}
}
}
const mapStateToProps = state => ({
foodReducer: state.foodReducer.foods
});
export default connect(mapStateToProps, {getfoods})(FoodComponent);
Вот мои initalState
из моего reducer
файла:
const initialState = {
error: null,
isLoaded: false,
foods: [],
}
Я не думаю, что мне нужно предоставлять свои действия, хранить или использовать редуктор, как он работает, если закомментатор закомментирован, но если вам нужно увидеть этот код, чтобы расшифровать эту проблему, я могу внести изменения в будущем. спасибо.