Unable to dispatch an action in react-redux using typescript

Question

I am developing a TODO app using react redux typescript. I am unable to dispatch an action. I am new to redux so stuck in it. I am creating an event onclick handleSubmitButton then it is throwing dispatch error. Can someone help me in that ?

AddToDo.tsx

const AddToDo: React.FC = () => {
    const [inputValue, setInputValue] = useState<string>("");

    const handleSubmitButton = (e: React.MouseEvent<HTMLButtonElement>)=> {
        e.preventDefault()
        console.log(inputValue, "inputValue");
        dispatch(addTodo(inputValue))
    }

    return (
        <div>
            <form noValidate>
                <div className="form-group">
                    <label htmlFor="todoitem">Todo Item:</label>
                    <input type="text" className="form-control" placeholder="Enter Text" value={inputValue} id="todoitem" onChange={handleEditTodoItem} />
                </div>
                <button type="submit" className="btn btn-primary" onClick={handleSubmitButton}>Submit</button>
            </form>
        </div>
    )
}

export default connect()(AddToDo)

Below is my action code -

export const addTodo = (name: string): AddTodoAction => (
   {
    type: ActionTypes.ADD_TODO,
    payload: {
      todo: {
        id: nextId++,
        name: name,
        done: false
      }
    }
  }
)

and Now my reducer code -

export function reducer(state: State = initialState, action: Action) {

  switch (action.type) {
    case ActionTypes.ADD_TODO: {

      const todo = action.payload.todo

      return {
        ...state,
        todos: [...state.todos, todo]
      }
    }
}
}

spender · Accepted Answer · 2020-09-14 11:05:41Z

2

The reason you are getting a "dispatch error" is because dispatch is probably undefined. This is because you failed to:

import { useDispatch } from 'react-redux'
// ...
const dispatch = useDispatch();

If using the hooks to hook into redux, you don't need to "connect" anything, nor write mapDispatchToProps. Just useSelector and useDispatch are enough to hook into the redux store, which makes for a much friendlier experience.

edited Sep 14, 2020 at 11:05

answered Sep 14, 2020 at 10:54

spender

121k36 gold badges245 silver badges369 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dax · Accepted Answer · 2020-09-14 11:37:03Z

0

This answer is based on not using Redux hooks. You are close, but you forgot to import your dispatch in connect() using mapDispatchToProps. This would look like something like this:

import { Dispatch } from 'redux';
import { addToDo } from '../action'; // replace this import with the correct path to your action

    type AddToDoProps = {
       addToDo: (inputValue: string) => void;
    }

    const AddToDo: React.FC<AddToDoProps> = ({ addToDo }) => {
    const [inputValue, setInputValue] = useState<string>("");

    const handleSubmitButton = (e: React.MouseEvent<HTMLButtonElement>)=> {
        e.preventDefault()
        console.log(inputValue, "inputValue");
        addTodo(inputValue)
    }

    return (
        <div>
            <form noValidate>
                <div className="form-group">
                    <label htmlFor="todoitem">Todo Item:</label>
                    <input type="text" className="form-control" placeholder="Enter Text" value={inputValue} id="todoitem" onChange={handleEditTodoItem} />
                </div>
                <button type="submit" className="btn btn-primary" onClick={handleSubmitButton}>Submit</button>
            </form>
        </div>
    )
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
   addToDo: (inputValue: string) => dispatch(addToDo(inputValue))
})

export default connect(null, mapDispatchToProps)(AddToDo)

Note: You are getting your dispatch method as a prop in your component which means you will have to define this prop in Typescript.

type AddToDoProps = {
  addToDo: (inputValue: string) => void;
}

Add this type to your component and define your dispatch prop in order to use it:

const AddToDo: React.FC<AddToDoProps> = ({ addToDo }) => ...

edited Sep 14, 2020 at 11:37

answered Sep 14, 2020 at 10:30

Dax

8255 gold badges13 silver badges32 bronze badges

3 Comments

spender Over a year ago

The redux hooks make life much easier now (athough keeping redux dependencies out of your visual components makes for much easier testing, so it's a mixed blessing).

Dax Over a year ago

Oh I just checked the docs and indeed the redux approach with hooks seems to be a lot easier. I'll leave this answer for people that aren't using hooks. Thanks for letting me know tho!

spender Over a year ago

I'm still torn on whether or not they are a good idea. This nice thing about this approach is that the visual component is entirely standalone from the connecting HOC. I suppose a similar model can be used with hooks by using a separate component for wiring-up of redux.

Collectives™ on Stack Overflow

Unable to dispatch an action in react-redux using typescript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related