By Niko Wonde


2018-12-06 14:57:23 8 Comments

I am trying to use Axios with Redux reducer and trying to save response into state so that I can print it out, but when I try to prin the image to the page it returns typeError: state is undefined. I can console.log the response, but can't figure out how to save it or to get it working right. View picture

import Axios from 'axios';
const initState = {
    some: '',
    cat: '',
}
const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'GET_NEW_CAT':
        Axios.get('http://aws.random.cat/meow')
        .then((response) => {
            console.log(response.data.file)
           return state.cat = response.data.file
        }) 
        .catch((err) => console.log(err));
        break;
        default:
            return state;
    }
}
export default reducer;

Edit: This is where do the dispatching and mapping state:

import React from 'react';
import { connect } from 'react-redux';

const CatsPage = (props) => {
    return (
        <div>
            <button onClick={props.getNewCatImage}>Get new cat image</button>
            <img src={props.cats} alt='Cat'/>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        cats: state.cat
    };
};

const mapDispatchToProps = dispatch => {
    return {
        getNewCatImage: () => dispatch({type: 'GET_NEW_CAT'}),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CatsPage);

2 comments

@vapurrmaid 2018-12-06 15:10:48

You're mutating state with this line:

return state.cat = response.data.file

When working with redux, state is immutable and thus you update state by using copies. Therefore you can use Object.assign as below:

return Object.assign({}, state, { cat: response.data.file })

Or more elegantly, the spread operator:

return { ...state, cat: response.data.file }

As an extra, the Redux documentation contains some recipes describing how to work with immutable state for various scenarios.

@Niko Wonde 2018-12-06 15:29:03

Hey, I am aware of that spread operator and changed my code back to it and even tried with object.assign, but error did not disappear. I just edited origanl post with details where I use mapStateToProps to get that state from reducer.

@Vjeko Babic 2018-12-06 15:08:49

What error say is that state is undefined. That means that your component is not connected to state apparently.

Sou you are missing a few steps here.

@Niko Wonde 2018-12-06 15:17:51

Hey, thanks for answering, I do have Provider in my project and I am using connect to mapStateToProps and I believe that I do not need combineReducers at this point, since I am using only one reducer...And I do believe the problem lays in the Axios.get, when I try to set new value for 'cat', but I do not know what the problem is...

Related Questions

Sponsored Content

1 Answered Questions

1 Answered Questions

[SOLVED] Redux - State is updating but React components are not

1 Answered Questions

[SOLVED] Redux - Deleting Item from State

2 Answered Questions

2 Answered Questions

3 Answered Questions

[SOLVED] react + redux + axios: actions not sent to reducers

2 Answered Questions

[SOLVED] React-redux tutorial : Where does children come from

1 Answered Questions

[SOLVED] Redux actions not calling reducers

1 Answered Questions

[SOLVED] redux-thunk dispatch method fires undefined action

Sponsored Content