javascript: la función de búsqueda no se llama con reaccionar-redux

Quiero llamar a una API de descanso con reaccionar-redux pero mi recuperación no llama en absoluto.

Mis acciones:

restActions.js file:

export const customerbyidGetAction = (data) => ({ type: types.customerbyidGetAction, data });

Mi reductor:

restReducer.js file:

import { Map, fromJS } from 'immutable';
import * as types from '../constants/restConstants';

const initialState = {};
const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action) {
    switch(action.type) {
        case types.customerbyidGetAction:
            return {
                ...state,
                data: action.payload
            }
        break;

        default:
            // the dispatched action is not in this reducer, return the state unchanged
            return state;
    }
}

archivo restApi.js:

import {customerbyidGetAction} from '../../redux/actions/restActions'

const URL = "https://***"



export default  function customerbyidGet() {
    
    return dispatch => {
        console.log("not called")
        dispatch(customerbyidGetAction());
        fetch(URL + 'customer/byid/Get',{
            method:'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'token':1234
            },
            body: JSON.stringify({'customerId': 1})
        })
        .then(res => {
            const r = res.json();
            return r;
        })
        .then(res => {
            if(res.error) {
                throw(res.error);
            }
            dispatch(customerbyidGetAction(res));
            return res;
        })
        .catch(error => {
            dispatch(customerbyidGetAction(error));
        })
    }
}



export default apis;

dentro de mi componente:

import React from 'react';
import { Helmet } from 'react-helmet';
import Grid from '@material-ui/core/Grid';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import {
  Help, InsertDriveFile,
  MonetizationOn,
  Person,
  PersonPin,
  RemoveRedEye
} from '@material-ui/icons';

import { Link } from 'react-router-dom';
import CounterWidget from '../../../components/Counter/CounterWidget';
import colorfull from '../../../api/palette/colorfull';
import styles from '../../../components/Widget/widget-jss';
import PapperBlock from '../../../components/PapperBlock/PapperBlock';
import {customerbyidGetAction} from '../../../redux/actions/restActions';


class Panelclass extends React.Component {


  componentDidMount(){
    const {customerbyidGet} = this.props;
   customerbyidGet()
  }
  

  render() {
    const { classes } = this.props;

    return (
      <div>
 Hi
      </div>
    );
  }
}

Panelclass.propTypes = {
  classes: PropTypes.object.isRequired,
  customerbyidGet: PropTypes.func.isRequired,
};

// const mapStateToProps = state => ({
//   customers: customerbyidGet(state),
// })

const mapDispatchToProps = dispatch => bindActionCreators({
  customerbyidGet: customerbyidGetAction
}, dispatch)

const Panel = connect(
  //mapStateToProps,
  null,
  mapDispatchToProps
)(Panelclass);

export default withStyles(styles)(Panel);

------------------------------------

Su reductor espera que la propiedad de carga útil esté en acción:

function reducer(state = initialImmutableState, action) {
  switch (action.type) {
    case types.customerbyidGetAction:
      return {
        ...state,
        data: action.payload, // Here
      };
  }
}

Entonces, debes tener esa propiedad en el creador de acciones:

const customerbyidGetAction = (data) => ({
  type: types.customerbyidGetAction,
  payload: data, // Here
});

Además, debe corregir la importación de acciones correcta en el componente:

import { customerbyidGet } from "../path-to/restApi";

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      customerbyidGet,
    },
    dispatch
  );

PD: Hoy en día, deberías usar la biblioteca Redux Toolkit, que reduce una gran cantidad de código repetitivo.

3

Recibí este error: "El envío no es una función" dentro del archivo restApi.js.

– S.M_Emamian

27 de marzo de 2021 a las 11:57

1

@S.M_Emamian Lo probé en sandbox. Funciona: caja de arena. Verifique el registro de la consola en el entorno sandbox.

- Ajeet Shah

27/03/2021 a las 12:10

¿Alguna idea de por qué el envío no estaba definido en su código?

- Ajeet Shah

27/03/2021 a las 13:50

------------------------------------

En primer lugar, defina la función API de descanso como se muestra a continuación

export default  function customerbyidGet(dispatch) {
    
    return () => {
        console.log("not called")
        dispatch(customerbyidGetAction());
        fetch(URL + 'customer/byid/Get',{
            method:'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'token':1234
            },
            body: JSON.stringify({'customerId': 1})
        })
        .then(res => {
            const r = res.json();
            return r;
        })
        .then(res => {
            if(res.error) {
                throw(res.error);
            }
            dispatch(customerbyidGetAction(res));
            return res;
        })
        .catch(error => {
            dispatch(customerbyidGetAction(error));
        })
    }
}

Luego pásalo a tu función mapDispatchToProps

const mapDispatchToProps = dispatch => bindActionCreators({
  customerbyidGetData: customerbyidGet(dispatch)
}, dispatch)

Y finalmente `invocarlo en mapDispatchToProps

componentDidMount(){
 const {customerbyidGetData} = this.props;
 customerbyidGetData()
}

------------------------------------

Las otras dos respuestas señalan buenos puntos, pero faltan algo muy crucial: eso; hay un error tipográfico.

    const {customerbyidGet} = this.props;
   customerbyidGet()

debería ser

    const {customerbyidGet} = this.props.customerbyidGet()