web-dev-qa-db-fra.com

React Redux: le créateur d'action n'appelle pas le réducteur

Mon créateur d'action n'appelle pas mon réducteur. Toute aide sera très appréciée.

types.js

export const SELECTED_FOOD = 'selected_food';

index.js (créateur d'action/action)

import {
  SELECTED_FOOD
} from './types';

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

Sortie de console.log dans le créateur d'action

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

Le composant EDIT n'a pas réussi à appeler la répartition.

J'aurais dû ajouter cela sur mon message initial, il semble qu'il y ait quelque chose de mal dans la façon dont la répartition est appelée. ESLint signale l'envoi sur la ligne 3 pour défini mais jamais utilisé.

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);
javascriptreactjsreduxactionreducers
9
kennedy

Le créateur de l'action ne le fait pas appelle le réducteur. C'est ce qu'il est, rien de plus, il crée une action - c'est-à-dire un objet avec le type d'action et la charge utile pour cette action.

Vous devez envoyer une action, pour forcer redux à appeler le réducteur, et c'est l'endroit où vous utilisez votre créateur d'action, c'est-à-dire:

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

cela devrait appeler le réducteur, mais la plupart du temps, vous n'appellerez pas directement le Dispatch, plutôt dans votre méthode mapDispatchToProps utilisée pour connecter votre composant react au magasin redux.

Il existe de nombreux exemples d'utilisation de react-redux pour utiliser la fonctionnalité de carte ci-dessus, donc je suggère de la lire et de lire comment fonctionne redux.

====== MODIFIER après la mise à jour de la question =========

Donc, tout d'abord, l'envoi depuis l'importation n'est pas utilisé et ESLint a raison de le dire, vous n'avez pas besoin de cette importation car dans:

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

vous n'appelez pas dispatch à partir de votre import uniquement à partir de l'argument, il est transmis à votre mapDispatchToProps par la fonction connect.

Alors c'est tout simplement faux:

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

vous avez importé un créateur d'action qui est appelé en cliquant sur la ligne du tableau, c'est-à-dire qu'un définition d'action est créé par le créateur d'action, et c'est tout. Votre code fait exactement ce que vous avez écrit.

La fonction mapDispatchToProps fait ce que son nom suggère - elle mappe les fonctions de répartition aux accessoires de votre composant.

Il devrait donc être:

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

et cela devrait expédier l'action et le travail.

Cependant Je voudrais fortement suggéré pour suivre des cours ou en savoir plus sur react, redux et react-redux, parce que vos exemples de code et la question elle-même suggèrent que vous essayez simplement de faire fonctionner quelque chose, sans comprendre le fonctionnement et même le fonctionnement de javascript. Désolé pour ce commentaire mais c'est à ça que ça ressemble.

8
alek kowalczyk

Je pense que vous devrez peut-être montrer comment vous importez d'autres fichiers. Mes observations à partir de ce que vous avez partagé:

1) Vous devez importer SELECTED_FOOD à partir des types.

2) Votre return state doit être dans le contexte de l'instruction switch.

0
Rowland