Dispatching Actions to Change State

To mutate(change) the redux state, you need to dispatch an action. Recall that an action is the 2nd parameter that gets passed to your reducer. An action is an object that tells your reducer what happened (e.g. toggle, click, etc.).

Let's create a function onClick that calls the Redux store's dispatch() function, which is how you fire off an action in Redux.

render() {
+ const onClick = () => store.dispatch({ type: 'TOGGLE' });
  return (
    <div>
      <h1>To-dos</h1>
      <div>
        Learn Redux&nbsp;
        <input
          type="checkbox"
          checked={!!this.state.checked}
+         onClick={onClick} />
      </div>
      {
        this.state.checked ? (<h2>Done!</h2>) : null
      }
    </div>
  );
}

Redux actions must have a type property, so we created an action type TOGGLE to match the reducer, and set the onClick function as an onClick handler for the checkbox. You'll now be able to toggle the checkbox!

Check your work

You can view the completed & working code from this tutorial here: