Question

我的动作创建者没有调用我的减速器。任何帮助都感激不尽。

types.js

export const SELECTED_FOOD = 'selected_food';

index.js（行动创作者/行动）

import {
  SELECTED_FOOD
} from './types';

export function selectedFood({data}) {
console.log('SELECTED_FOOD **********************',data);
  return({
    type: SELECTED_FOOD,
    payload: data
  });
}

行动创建者中的console.log输出

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

selected_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;
}

EDIT组件未能调用调度。

我应该在我的初始帖子中添加这个，看起来如何调用dispatch有问题。 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);

Answer 1

动作创建者不会调用减速器。它就是它，仅此而已，它创建了一个动作 - 即具有动作类型的对象和该动作的有效负载。

您需要调度操作，强制redux调用reducer，这就是您使用action action的地方，即：

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

应该调用reducer的

，但是大多数情况下你不会直接调用Dispatch，而是调用用于将react组件连接到redux存储的mapDispatchToProps方法。

有很多示例如何使用react-redux来使用上面的地图功能，所以我建议您阅读它，并阅读redux的工作原理。

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

所以首先从导入调度没有使用，ESLint是正确的告诉它，你不需要导入，因为：

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

您不能仅从论坛dispatch致电import，而是通过mapDispatchToProps功能将connect传递给您<tr onClick={() => selectedFood({data})}>。 / p>

然后这是完全错误的：

mapDispatchToProps

您导入了一个动作创建者，该动作创建者在点击表格行时被调用，即动作定义由动作创建者创建，并且就是它。您的代码完全按照您的编写完成。

<tr onClick={() => this.props.onClick({data})}>函数的作用与名称相同 - 它将调度函数映射到组件的道具。

所以它应该是：

react

那应该派遣行动和工作。

然而我会强烈建议参加某些课程或阅读有关redux，react-redux和user agent styles的更多信息，因为代码示例和问题本身表明，您只是试图让某些东西工作，没有基本的理解它是如何工作的，甚至是javascript如何工作。对此评论感到抱歉，但这就是它的样子。

Answer 2

我想你可能需要展示你是如何导入其他文件的。我对您分享的内容进行了观察：

1）您需要从类型中导入SELECTED_FOOD。

2）你的return state应该在switch语句的上下文中。

Answer 3

Redux中有一个经常被遗忘的规则，当您更改reducer时，您需要重新启动本地主机服务器。

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

如果看不到任何错字，只需重新启动本地主机服务器即可。（我通常使用NPM，因此我在终端中从npm start中控制+ c，并在每次添加新的reducer时再次运行npm start。）

React Redux：动作创建者不调用reducer

3 个答案: