Javascript React-Redux:操作创建者未调用reducer

我的动作创造者没有呼叫我的减速器。任何帮助都将不胜感激

types.js

export const SELECTED_FOOD = 'selected_food';

index.js（操作创建者/操作）

来自console.log in action creator的输出

Object {_id: "18240", description: "Croissants, apple", score: 0.75, fields: Object}

所选的_food_reducer.js

import {
SELECTED_FOOD

} from '../actions/types';

export default function(state = [], action) {
 switch(action.type) {
  case SELECTED_FOOD:
    console.log('Selected Food Reducer *************', state);
    return  action.payload ;
}

return state;
}

编辑未能调用分派的组件

我应该在我的第一篇文章中加上这一点，看来调度的调用方式有问题。ESLint正在第3行标记已定义但从未使用的调度

import React from 'react';
import { connect } from 'react-redux';
import { dispatch } from 'react-redux';
import { selectedFood } from '../actions/index';

class TableRow extends React.Component {
  render() {
    const {
      data
    } = this.props;


    console.log('PROPS TableRow', this.props);

    const row = data.map((data) =>
    <tr onClick={() => selectedFood({data})}>
      <td key={data.description}>{data.description}</td>
      <td key={data.id}>{data.fields.nutrients[0].amountPer100G}</td>
      <td key={data.id}>{data.fields.nutrients[1].amountPer100G}</td>
      <td key={data.id}>{data.fields.nutrients[4].amountPer100G}</td>
    </tr>
    );
    return (
      <tbody>{row}</tbody>
    );
  }
}

const  mapStateToProps = (state) => {
  return {
    selectedFood: state.selectedFood
  }
}


const mapDispatchToProps = (dispatch) => {
  console.log('IN mapDispatchToProps')
  return {
    onClick: ({data}) => {
      dispatch(selectedFood({data}))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProp)(TableRow);

从“React”导入React；
从'react redux'导入{connect}；
从'react redux'导入{dispatch}；
从“../actions/index”导入{selectedFood}；
类TableRow扩展了React.Component{
render（）{
常数{
数据
}=这是道具；
log（'PROPS TableRow'，this.PROPS）；
const row=data.map（（数据）=>
选择的食物（{data}}>
{data.description}
{data.fields.nutrients[0].amountPer100G}
{data.fields.nutrients[1].amountPer100G}
{data.fields.nutrients[4].amountPer100G}
);
返回(
{row}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
selectedFood:state.selectedFood
}
}
const mapDispatchToProps=（调度）=>{
console.log（'在mapDispatchToProps'中）
返回{
onClick:（{data}）=>{
分派（选定食物（{data}））
}
}
}
导出默认连接（mapStateToProps、mapDispatchToProp）（TableRow）；

动作创建者不会调用减速机。它就是它本身，仅此而已，它创建了一个动作——也就是说，一个具有动作类型和该动作有效负载的对象

您需要分派一个动作，以强制redux调用reducer，这就是您使用动作创建者的地方，即：

import { Dispatch } from "redux";
import { selectedFood } from "./actions";
Dispatch(selectedFood({type:"hamburger"}));

这应该调用reducer，但是大多数情况下，您不会直接调用

Dispatch

，而是使用

mapDispatchToProps

方法将react组件连接到redux存储

关于如何使用

react-redux

来使用上面的映射功能，有很多示例，因此我建议您仔细阅读，并了解redux是如何工作的

======问题更新后编辑=========

因此，首先不使用从导入发送，ESLint告诉它是正确的，您不需要该导入，因为在：

const mapDispatchToProps = (dispatch) => {
  console.log('IN mapDispatchToProps')
  return {
    onClick: ({data}) => {
      dispatch(selectedFood({data}))
    }
  }
}

您不需要从

import

中调用

dispatch

，只需要从参数中调用，它通过

connect

函数传递给

mapDispatchToProps

那么这完全是错误的：

<tr onClick={() => selectedFood({data})}>

这应该是行动和工作的调度

---

然而我强烈建议参加一些课程或阅读更多关于

react

、

redux

和

react redux

的内容，因为您的代码示例和问题本身表明，您只是在尝试让某些东西工作，而没有基本了解它是如何工作的，甚至还有javascript的工作原理。很抱歉，这就是它的样子。

我认为您可能需要展示如何导入其他文件。我对你分享的内容的观察：

1） 您需要从类型导入所选的食物

---

2） 您的

返回状态应该在switch语句的上下文中。
在Redux中有一条经常被遗忘的规则，当您更改reducer时，您需要重新启动本地主机服务器

您做得很正确-有很多方法可以将Redux构建为React。如果要使用connect（）导入动作创建者，则不需要使用mapDispatchToProps

如果没有发现任何拼写错误，只需重新启动本地主机服务器。（我通常使用NPM，因此我在终端中控制NPM启动中的+c，每次添加新减速器时再次运行NPM启动。）
您需要调度它，而不是只调用它Hank you Alek，我最初没有导入调度，但在导入之后，它仍然工作，ESLint将其标记为声明但从未使用。我相信mapDispatchToProps中有不正确的地方，但我看不到。编辑了我的答案。谢谢Alek，这是个好建议。昨晚我再次浏览了redux文档，发现了这个问题。这帮了大忙。我打算更新我的帖子。再次感谢您的帮助=）如果我的帖子对您有所帮助，请随意将其标记为答案：-）来自@alekkowalczyk的精彩解释
<tr onClick={() => selectedFood({data})}>

<tr onClick={() => this.props.onClick({data})}>