Error trying to use Redux action dispatcher in React component? - reactjs

Question

Ive created a Rexux store. In my entry point I can add an item to my store and see that it works:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import allReducers from './reducers';
import { ADD_TODO_ITEM } from './actionCreators';
import App from './components/containers/App';
let store = createStore(allReducers);
store.subscribe(() => console.log(store.getState()));
store.dispatch(ADD_TODO_ITEM('test 1'));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
Im trying to use this action dispatcher in my component. When I submit the form below I get the error:
TypeError: dispatch is not a function
I think Im not passing dispatch to AddTodo, but how do you pass dispatch to component?
import React from 'react';
import { ADD_TODO_ITEM } from '../../actionCreators';
const AddTodo = ({ dispatch }) => {
let input;
return (
<form
onSubmit={e => {
e.preventDefault();
const text = input.value;
console.log(text);
dispatch(ADD_TODO_ITEM(text));
}}
>
<input
type="text"
ref={node => {
input = node;
}}
/>
<button type="submit">Add Item</button>
</form>
);
};
export default AddTodo;

Answer 1

In your case, this.props is empty because you haven't passed any props or connected your component to your redux state. In order to have dispatch in your component, you'll need to use connect from react-redux which takes 2 arguments, one being mapStateToProps and other is mapDispatchToProps. The code goes something like this:
import React from 'react';
import {connect} from 'react-redux';
import { ADD_TODO_ITEM } from '../../actionCreators';
const AddTodo = ({ addItem }) => {
let input;
return (
<form
onSubmit={e => {
e.preventDefault();
const text = input.value;
console.log(text);
dispatch(addItem(text));
}}
>
<input
type="text"
ref={node => {
input = node;
}}
/>
<button type="submit">Add Item</button>
</form>
);
};
const mapDispatchToProps = (dispatch) => {
return {
addItem: (item) => {
dispatch(ADD_TODO_ITEM(item));
}
}
};
export default connect(undefined, mapDispatchToProps)(AddTodo);