react-redux dispatch undefined - reactjs

Question

In my App.js :
const initialAppState = {
nums: {},
};
const reducer = (state = initialAppState, action) => {
if (
action.a === undefined ||
action.b === undefined ||
action.c === undefined
) {
return state;
}
if (state.nums[action.a][action.b] === undefined) {
state.nums[action.a][action.b] = {};
}
return {
nums: (state.nums[action.a][action.b] =
action.c),
};
};
const store = createStore(reducer);
Then passed it with Provider.
When in my Test.js I'm trying to change the value it give me error :
const mapStateToProps = (state) => {
return {
nums: state.nums,
};
};
function mapDispatchToProps(dispatch) {
return {
add: (a, b, c) =>
dispatch({a: a, b: b, c: c}),
};
}
export default connect(mapStateToProps, mapDispatchToProps())(Test);
And the Test functional component looks like this :
function Test({nums, dispatch})
...
function add(data, count) {
dispatch.add('1','2','3');
}
It give me error saying : TypeError: undefined is not an object (evaluating 'dispatch.add')
Shouldn't it recognize dispatch as dispatch is Test's parameter, and add is another function of that functional component ?

Answer 1

It’s not dispatch.add() its props.add()
// add comes in as a prop. that’s why it’s called map dispatch to props.
function Test({nums, add: doAdd})
...
function add(data, count) {
doAdd('1','2','3');
}

Answer 2

I would recommend you organize your code. Try to move actions and reducers into separate files like actions.js, reducers.js.
REDUCER NEED SOME FIXES:
In your example of reducer in the last return you are trying to mutate state.
Also as you can see in your second if there are no return.
PROPOSAL OF ACTIONS AND REDUCERS SEPARATION
Inside your App.js you will createStore:
//App.js
import { reducer } from "./reducers"
const store = createStore(reducer);
<Provider store={ store }>
...
</Provider>
Now let's do actions.js file:
//actions.js
export const ADD_ACTION='ADD_ACTION' // action type
export function addAction(data) {
return { type: ADD_ACTION, data }
}
In reducers you'll move part of code from your App.js. I recommend you to use switch inside your reducer like that:
//reducers.js
import { ADD_ACTION } from "./actions";
const initialAppState = {
nums: {},
};
export const reducer = (state = initialAppState, action) => {
switch(action.type) {
case ADD_ACTION:
return Object.assign({}, state, { nums: action.data });
default:
return state
}
};
As you can see one of the ADD_ACTION is returning new object with updated nums value. This is because one of the essential Redux rules is "Do not mutate state".
Now, let's try our action in Test.js. First import addAction from actions.js. Then call dispatch with addAction as an argument.
//Test.js functional component version
import { addAction } from "./actions";
function Test({dispatch}) {
...
function add(data, count) {
dispatch(addAction(data));
}
}
export default connect(null, null)(Test);
Component receives dispatch from connect. Connect has (null, null) because in this case we are not using mapStateToProps, nor mapDispatchToProps.
Extra tip: For class component you'll use action in a little bit different way.
//Test.js Class component version
import React from 'react';
import { addAction } from "./actions";
import { connect } from 'react-redux';
class TestClass extends React.Component {
render() {
return(
<button onClick={() => this.props.addAction(2)}>Action</button>
)
}
}
const mapDispatchToProps = ({
addAction
});
export default connect(null, mapDispatchToProps)(TestClass);
In class component example you'll call action with value 2 when onClick event fires.
Working sandbox example: react-redux example