Develop Reference

React-Redux TypeError: this.props.getAnimals is not a function

When using react, redux and thunk to fetch some data from an API, I am experiencing an error
TypeError: this.props.getAnimals is not a function\
which is triggered by the line
this.props.getAnimals();
Using Redux Tools, we can see that this.props.getAnimals function was successfully executed, showing the actions animals_are_loading, get_animals and animals_are_loading again, and the states are being updated correctly, as is what you will expect to see when this.props.getAnimals() has called the function getAnimals.
Any idea what is happening?
containers/Animals.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAnimals } from '../../actions';
class Animals extends Component {
componentDidMount() {
this.props.getAnimals();
}
renderAnimalsList() {
return ...
}
renderLoading() {
return ...
}
render() {
return (
<div>
<h1>Animals</h1>
{ (this.props.animalsAreLoading) ? this.renderLoading() : this.renderAnimalsList() }
</div>
)
}
}
function mapStateToProps(state) {
return {
animals: state.animals.animals,
animalsAreLoading: state.animals.isLoading
}
}
function mapDispatchToProps(dispatch) {
return {
getAnimals
}
}
export default connect(mapStateToProps, getAnimals)(Animals)
actions/index.js
import axios from 'axios';
import { GET_ANIMALS_SUCCESS, ANIMALS_ARE_LOADING } from './types';
export function getAnimals() {
return function(dispatch) {
dispatch(animalsAreLoading(true)) // ACTION SEEN IN REDUX TOOLS
axios
.get(`${ROOT_URL}/animals`, {
headers: {authorization: localStorage.getItem('token')}
})
.then(response => {
console.log(response.data.animals) // THIS RETURNS DATA!
// ACTION SEEN IN REDUX TOOLS
dispatch(getAnimalsSuccess(response.data.animals))
// ACTION SEEN IN REDUX TOOLS
dispatch(animalsAreLoading(false))
return response
})
}
}
export function animalsAreLoading(bool) {
return {
type: ANIMALS_ARE_LOADING,
payload: bool
}
}
export function getAnimalsSuccess(animals) {
return {
type: GET_ANIMALS_SUCCESS,
payload: animals
}
}

I think it's a simple mapDispatchToProps mistake:
export default connect(mapStateToProps, **getAnimals**)(Animals)
replace with:
export default connect(mapStateToProps, mapDispatchToProps)(Animals)
You can also inline mapStateToProps and mapDispatchToProps in the connect function:
export default connect(state => ({
animals: state.animals.animals,
animalsAreLoading: state.animals.isLoading
}), { getAnimals })(Animals)

Try this: just replace these line of codes with yours
function mapDispatchToProps(dispatch) {
return ({
getAnimals: () => dispatch(getAnimals())
})
}
The error:
TypeError: this.props.getAnimals is not a function
That's pretty clear! Because after merging the return object of the mapDispatchToProps() function to the props object of the React component. The getAnimals property is actually not a function.
function mapDispatchToProps(dispatch) {
return {
getAnimals // this property is properly not a function
}
}
What I did to fix the error is setting the value to the getAnimals property:
getAnimals: () => dispatch(getAnimals())
make its value become a function which dispatches an action creator.

Uncaught TypeError: Cannot read property 'props' of undefined (reactjs) (very simpel)

I followed this beginner tutorial on redux: text, vid.
Everything works with the exception of the increment button. When I click the increment button I get this error:
Uncaught TypeError: Cannot read property 'props' of undefined
See what happens: gif
Why am I getting that error when I did "mapStateToProps"?
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Test_left from './eo_app.jsx';
import { Provider } from 'react-redux';
import { createStore } from "redux";
const initialState = {
count: 21
};
const reducer = (state = initialState, action) => {
console.log('reducer', action);
switch (action.type) {
case 'INCREMENT':
return { count: 55 };
default:
return state;
}
};
const store = createStore(reducer);
const App = () => (
<Provider store={store}>
<Test_left />
</Provider>
);
ReactDOM.render(<App />, document.getElementById('target'));
//// store.dispatch({type: 'INCREMENT' }); this will work as expected
eo_app.jsx
import React from 'react';
import { connect } from 'react-redux';
class Test_left extends React.Component {
constructor(props) {
super(props);
}
increment () {
this.props.dispatch({ type: 'INCREMENT' }); // <== ERROR IS RAISED HERE
}
render() {
console.log('props:', this.props)
return (
<React.Fragment>
<h1> WE GOT RENDERED </h1>
<h1>{this.props.count}</h1>
<button onClick={this.increment}> Increment </button>
</React.Fragment>
)
};
}
const mapStateToProps = state => ({
count: state.count
})
export default connect(mapStateToProps)(Test_left);

EDIT:
There are actually two issues:
The first is that you need to bind your increment function to the class itself. This is a common "gotcha," you can read about it here - https://reactjsnews.com/es6-gotchas
The second is, with react-redux and the connect function, you need to map the redux dispatch function to a prop. This is done with a second function you pass in your connect call: mapDispatchToProps.
Yours might look like:
const mapDispatchToProps = dispatch => ({
handleClick: () => dispatch({ type: 'INCREMENT' })
});
With those two changes, your component would then look like
class Test_left extends React.Component {
constructor(props) {
super(props);
// Bind `increment` to this class's scope
this.increment = this.increment.bind(this);
}
increment () {
// Use newly created prop function to dispatch our action to redux
this.props.handleClick();
}
// ...
}
const mapStateToProps = state => ({
count: state.count
});
const mapDispatchToProps = dispatch => ({
handleClick: () => dispatch({ type: 'INCREMENT' })
});
export default connect(mapStateToProps, mapDispatchToProps)(Test_left);

When you do: this.props.dispatch, it will call dispatch mapped with the connect. But you don't have map for the dispatch:
export default connect(mapStateToProps)(Test_left);
So, replace preceding code with:
export default connect(mapStateToProps, mapDispatchToState)(Test_left);
Now, define the function for mapDispatchToState and call the dispatch there.
The key issue I forgot to mention is that make sure to bind this because this will be undefined when you call inside a method. Or, you may assign a public class method:
increment = () => { // now, this will be accessible
PS: See this post why you need to use map dispatch instead of directly dispatching it. It makes sense not to mix the connect maps with direct dispatch.

Pass jest.fn() function to mapDispatchToProps in enzyme shallow render

Having very simple component:
import PropTypes from 'prop-types'
import React from 'react'
import { connect } from 'react-redux'
class MyComponent extends React.Component {
componentWillMount() {
if (this.props.shouldDoSth) {
this.props.doSth()
}
}
render () {
return null
}
}
MyComponent.propTypes = {
doSth: PropTypes.func.isRequired,
shouldDoSth: PropTypes.bool.isRequired
}
const mapStateToProps = (state) => {
return {
shouldDoSth: state.shouldDoSth,
}
}
const mapDispatchToProps = (dispatch) => ({
doSth: () => console.log('you should not see me')
})
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
I want to test if doSth is called when shouldDoSth is equal true.
I've written a test:
describe('call doSth when shouldDoSth', () => {
it('calls doSth', () => {
const doSthMock = jest.fn()
const store = mockStore({shouldDoSth: true})
shallow(<MyComponent doSth={doSthMock}/>, { context: { store } }).dive()
expect(doSthMock).toHaveBeenCalled()
})
})
but it seems that although I pass doSth as props it gets overridden by mapDispatchToProps as console.log('im not a mock') is executed.
How to properly pass/override/assign doSth function to make component use mock instead of function from mapDispatchToProps. Or maybe I'm doing something which should not be allowed at all and there is 'proper' way of testing my case. Shall I just mock dispatch instead and check if it is called with proper arguments?

I think one thing you need to figure out is whether you want doSth to be a prop, or a redux action connected in mapDispatchToProps.
If it's a prop, then you would connect it to redux in a parent (container). Remove it from this component's mapDispatchToProps. This would make the component more testable.
If you want it to be a redux action connected in this component, then it would make sense to move the action out of this component, somewhere like actions.js, import it in this component, and then mock it in the test jest.mock('actions.js', () => ({doSth: jest.mock()}))

Export the unconnected component and use it in the test and you will be able to override the mapDispatchToProps action.
export class MyComponent extends React.Component {
componentWillMount() {
if (this.props.shouldDoSth) {
this.props.doSth()
}
}
render () {
return null
}
}
MyComponent.propTypes = {
doSth: PropTypes.func.isRequired,
shouldDoSth: PropTypes.bool.isRequired
}
const mapStateToProps = (state) => {
return {
shouldDoSth: state.shouldDoSth,
}
}
const mapDispatchToProps = (dispatch) => ({
doSth: () => console.log('you should not see me')
})
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
import {MyComponent} from '../MyComponent'
describe('call doSth when shouldDoSth', () => {
it('calls doSth', () => {
const doSthMock = jest.fn()
const store = mockStore({shouldDoSth: true})
shallow(<MyComponent doSth={doSthMock}/>, { context: { store } }).dive()
expect(doSthMock).toHaveBeenCalled()
})
})

I think that you should ask yourself if you want to test the unconnected MyComponent or the connected one.
Here you have two discussions that may help you: Am I testing connected components correclty? and Can't reference containers wrapped in a Provider or by connect with Enzyme
If you are not testing the action nor state properly said, you might forget about mapStateToProps and mapDispatchToProps (those processes are already tested by redux) and pass values through props.
Check the following example:
describe('MyComponent', () => {
let wrapper;
const doSthMock = jest.fn();
beforeEach(() => {
const componentProps = {
doSth: true,
};
wrapper = mount(
<MyComponent
{... componentProps}
doSth={doSthMock}
/>
);
});
it('+++ render the component', () => {
expect(wrapper.length).toEqual(1);
});
it('+++ call doSth when shouldDoSth', () => {
expect(doSthMock).toHaveBeenCalled();
});
})

React Redux - Actions must be plain objects. Use custom middleware for async actions

I try to deal with ajax data using axom in my learning react,redux project and I have no idea how to dispatch an action and set the state inside a component
In component will mount
componentWillMount(){
this.props.actions.addPerson();
}
Store
import { createStore, applyMiddleware } from "redux";
import rootReducer from "../reducers";
import thunk from "redux-thunk";
export default function configureStore() {
return createStore(rootReducer, applyMiddleware(thunk));
}
In Action :
import * as types from "./action-types";
import axios from "axios";
export const addPerson = person => {
var response = [];
axios
.get(`&&&&&&&&&&&`)
.then(res => {
response = res.data;
return {
type: types.ADD_PERSON,
response
};
});
};
In reducer
import * as types from "../actions/action-types";
export default (state = [], action) => {
console.log("action======>", action);
switch (action.type) {
case types.ADD_PERSON:
console.log("here in action", action);
return [...state, action.person];
default:
return state;
}
};
I am getting Actions must be plain objects. Use custom middleware for async actions.

You should use dispatch for async function. Take a look of the redux-thunk's documentation: https://github.com/gaearon/redux-thunk
In Action:
import * as types from "./action-types";
import axios from "axios";
export const startAddPerson = person => {
return (dispatch) => {
return axios
.get(`https://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res => {
dispatch(addPersons(res.data));
});
}
};
export const addPersons = personList => {
return {
type: types.ADD_PERSON,
personList
};
}
In PersonComponent:
class Person extends Component {
constructor(props){
super(props);
}
componentWillMount() {
this.props.dispatch(startAddPerson())
}
render() {
return (
<div>
<h1>Person List</h1>
</div>
);
}
}
export default Redux.connect()(Person);

You need two actions here: postPerson and addPerson.
postPerson will perform the API request and addPerson will update the store:
const addPerson = person => {
return {
type: types.ADD_PERSON,
person,
}
}
const postPerson = () => {
return (dispatch, getState) => {
return axios.get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res => dispatch(addPerson(res.data)))
}
}
in your component, call postPerson()

You use the redux-thunk library which gives you access to the "getState" and "dispatch" methods. I see that that has been added by Chenxi to your question. Run your async operation first within your action and then call "dispatch" with your simple action action creator, which will return the simple object that redux is looking for.
Here is what your async action creator and your simple action creator(broken out into two action creators) will look like:
export const addPersonAsync = (person) => {
return (dispatch) => {
var response = [];
axios
.get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res => {
response = res.data;
dispatch(addPerson(response));
});
};
};
export const addPerson = (response) => ({
type: types.ADD_PERSON,
response
});
From your component, you'll now call the "addPersonAsync" action creator.

React use redux action don't work In own module

This my util module, and when I use redux action it does not work.
import {openloading} from '../actions/loading'
export default function (e) {
openloading(e.font);
}
But in my react component it does work

Actions themselves do nothing, which is ironic given the name. Actions merely describe what is going to happen and how state will change. Change actually occurs when these instructions are dispatched to the reducer. As Paul said, you need access to the dispatch method.
Typically, you're calling your util module functions from within your components. In that case, you might want to pass the dispatch method as a parameter.
import { openloading } from '../actions/openloading'
export const myFn = (e, dispatch) => {
dispatch(openloading(e.font))
}
Your component should get wired up to Redux like so:
import React from 'react'
import { connect } from 'react-redux'
import { myFn } from 'somewhere'
const myComponent = ({ dispatch }) => {
myFn(e, dispatch)
return (
<div>
{ ...whatever }
</div>
)
}
const mapStateToProps = (state) => {
return { ...stuff }
}
const mapDispatchToProps = (dispatch) => {
return {
dispatch: dispatch
}
}
export default connect(mapStateToProps, mapDispatchToProps)(myComponent)
Note that dispatch is getting passed into the component as a prop in mapDispatchToProps.