React Redux：動作創建者不調用減速器

Question

我的動作創建者沒有調用我的減速器。 任何幫助都感激不盡。

類型.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;
}

編輯組件無法調用調度。

我應該在我最初的帖子中添加這個，看來調度的調用方式有問題。 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 調用減速器，這就是你使用動作創建器的地方，即：

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

這應該調用reducer，但是大多數情況下，您不會直接調用Dispatch ，而是在用於將反應組件連接到redux 存儲的mapDispatchToProps方法中調用。

有很多示例如何使用react-redux來使用上面的地圖功能，所以我建議閱讀它，並閱讀 redux 是如何工作的。

====== 問題更新后編輯 ========

因此，首先不使用從 import 調度，ESLint 告訴它是正確的，您不需要導入，因為在：

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

您不會僅從參數中從import調用dispatch ，它會通過connect函數傳遞給您的mapDispatchToProps 。

那么這完全是錯誤的：

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

您導入了一個單擊表行時調用的動作創建者，即動作定義是由動作創建者創建的，僅此而已。 您的代碼完全符合您的要求。

mapDispatchToProps函數顧名思義 - 它將調度函數映射到組件的 props。

所以應該是：

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

這應該分派行動和工作。

但是，我強烈建議您參加一些課程或閱讀有關react 、 redux和react-redux更多信息，因為您的代碼示例和問題本身表明，您只是想使某些東西起作用，而沒有對其工作原理的基本了解，甚至 javascript 是如何工作的。 很抱歉發表評論，但這就是它的樣子。

Answer 2

我認為您可能需要展示您如何導入其他文件。 我從您分享的內容中得出的觀察結果：

1) 您需要從類型中導入SELECTED_FOOD 。

2) 您的return state應該在 switch 語句的上下文中。

Answer 3

Redux 中有一個經常被遺忘的規則，當您更改減速器時，您需要重新啟動 localhost 服務器。

你做得對 - 有很多方法可以將 Redux 構建到 React 中。 如果您使用 connect()() 導入動作創建者，則不需要使用 mapDispatchToProps。

如果您沒有看到任何拼寫錯誤，只需重新啟動您的本地主機服務器。 （我通常使用 NPM，所以我在終端中從 npm start 中控制 +c 並在每次添加新的減速器時再次運行 npm start 。）