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

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直接调用,而是mapDispatchToProps用你的反应组件连接到redux存储的方法.

有大量的示例如何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})}>

您导入了一个动作创建者,该动作创建者在单击表行时被调用,即动作定义由动作创建者创建,就是这样.您的代码完全符合您的要求.

该mapDispatchToProps函数执行名称建议 - 它将调度函数映射到组件的props.

所以它应该是:

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

那应该派遣行动和工作.

但是我强烈建议学习一些课程或阅读更多react,redux并且react-redux,因为你的代码示例和问题本身就表明,你只是试图让某些东西起作用,没有基本的理解它是如何工作的,甚至是javascript如何工作.对不起该评论,但这就是它的样子.