Redux ds
Learn The Fundamentals of Redux

Dispatching Actions to Change State

PRO

In order to mutate 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 a plain-old JavaScript object that tells your reducer what happened.

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

Dispatch the TOGGLE action when the checkbox is clicked
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 let's create an action with type TOGGLE to match the reducer, and add the onClick function as an onClick handler for the checkbox. Now, if you look in the browser, you'll notice you can actually toggle the checkbox.

Check your work

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

 

I finished! On to the next tutorial