CODEWITHSUNDEEP
reactjsredux
Evanss
Evanss

Reputation: 23203

Error trying to use Redux action dispatcher in React component?

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;

Upvotes: 1

Views: 78

Answers (1)

Ajay Gaur
Ajay Gaur

Reputation: 5280

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);

Upvotes: 1

Related Questions