javascript - react 终极版 : Action creator not calling reducer

Question

我的 action creator 没有调用我的 reducer。任何帮助都感激不尽。

类型.js

export const SELECTED_FOOD = 'selected_food';

index.js( Action 创建者/ Action )

import {
  SELECTED_FOOD
} from './types';

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

action creator 中 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)。

我应该在我最初的帖子中添加这个，看起来调用 dispatch 的方式有问题。 ESLint 在第 3 行将 dispatch 标记为 defined but never used。

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

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

你需要dispatch一个action，强制redux调用reducer，这就是你使用action creator的地方，即:

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

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

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

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

所以首先没有使用 dispatch from import 并且 ESLint 告诉它是正确的，你不需要那个导入因为在:

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

你不叫dispatch来自你的 import仅从参数中，它传递给您的 mapDispatchToProps通过 connect功能。

那么这是完全错误的:

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

您导入了一个在单击表格行时调用的 Action 创建器，即由 Action 创建器创建的 Action 定义，仅此而已。您的代码完全符合您的要求。

mapDispatchToProps function 的作用顾名思义 - 它将调度函数映射到组件的 props。

所以应该是:

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

这应该会派发 Action 和工作。

但是我强烈建议参加一些类(class)或阅读更多关于react的信息, redux和 react-redux ，因为您的代码示例和问题本身表明，您只是在尝试让某些东西工作，而没有基本了解它是如何工作的，甚至没有基本了解 javascript 是如何工作的。很抱歉发表评论，但这就是它的样子。