CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-hooks
user10586830
user10586830

Reputation:

Action Reducer function not being called

I'm trying to fetch from django REST api but the dispatch action reducer won't work. I'm using Material UI, Hooks, Redux.

Action Reducer code:

import axios from 'axios';

import { GET_NOTE } from './types';

// GET NOTE
export const getNote = () => (dispatch) =>  {
    console.log('Contacting API');
    axios.get('/api/note/')
        .then(response => {
            console.log('api contact');
            dispatch({
                type: GET_NOTE,
                payload: response.data
            });
        }).catch(error => console.log(error));
};

Functional component calling it: 

import React from 'react';

import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getNote } from '../../redux/actions/note'

import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    container: {
        minHeight: '100vh',
        paddingTop: '25vh',
    },
}))


const Note = () => {
    const classes = useStyles();

    console.log(getNote());

    React.useEffect(() => {
        console.log('componentDidMount is useEffect in React Hooks');
        getNote();
    }, [])

    Note.propTypes = {
        note: PropTypes.array.isRequired
    }
    return (
    <div className={classes.container}>
        <Typography>
            This is note page.
        </Typography>
    </div>
);}

const mapStateToProps = state => ({
    note: state.note.note
});

export default connect(
    mapStateToProps, 
    { getNote }
)(Note);

I tracked where the code was not running and it was on getNote() function in 'Note' functional component. The console was something just like this:

note.jsx:21 dispatch => {
console.log('Contacting API');
  axios__WEBPACK_IMPORTED_MODULE_0___default.a.get('/api/note/').then(response => {
    console.log('api contact');
    dispatch({
      type: _types__W…
note.jsx:24 componentDidMount is useEffect in React Hooks

Github link to code: https://github.com/PranishShresth/E-classmate

Upvotes: 0

Views: 561

Answers (2)

Striker
Striker

Reputation: 92

I think you should use props.getNote() and dispatch it and once you do it, you should be good.

Upvotes: 0

Asaf Aviv
Asaf Aviv

Reputation: 11770

The problem is that you don't call the injected getNote that connect is passed for you through props, you call the original function that you import.

You can use connect in function components but react-redux also gives you useSelector and useDispatch hooks that can replace the connect HOC

Example using connect

const Note = props => {
  useEffect(props.getNote, [])

  return ...
}

// don't define propTypes inside the component body
Note.propTypes = { 
  note: PropTypes.array.isRequired
}

const mapStateToProps = state => ({
  note: state.note.note
})

export default connect(
  mapStateToProps, 
  { getNote }
)(Note)

Example using hooks

const Note = () => {
  const note = useSelector(state => state.note.note)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getNote())
  }, [])

  return ...
}

Upvotes: 1

Related Questions