update reducer exercise

Author: alexlobera

src/components/patterns/CustomHooks/exercise/index.jsx

@@ -10,7 +10,7 @@ const Bonus = () => {
  <h3>🏋️‍♀️Exercise</h3>
  <h4>
  🎯 The goal is to extract some component logic into a reusable function
- avoiding pitfalls
+ avoiding common pitfalls
  </h4>
 
  <h1>

src/components/patterns/HookReducer/Page.jsx

@@ -5,36 +5,84 @@ import Exercise from "./exercise";
 const Page = () => (
  <React.Fragment>
  <h2>Hook Reducer</h2>
+ <p>
+ From the{" "}
+ <a
+ href="https://reactjs.org/docs/hooks-reference.html#usereducer"
+ target="_blank"
+ >
+ React docs
+ </a>
+ </p>
+ <blockquote>
+ React.useReducer is usually preferable to useState when you have complex
+ state logic that involves multiple sub-values or when the next state
+ depends on the previous one.{" "}
+ <em>(We'll practice this in this exercise)</em>
+ </blockquote>
+ <blockquote>
+ React.useReducer also lets you optimize performance for components that
+ trigger deep updates because you can pass dispatch down instead of
+ callbacks.{" "}
+ <em>(We'll practice this in the next exercise about Context)</em>
+ </blockquote>
  <h3>Example</h3>
+ <p>Basic login form</p>
  <Example />
+ <hr />
+ <h3>🥑 Before the exercise 🏋️‍♀️</h3>
+ <p>
+ The code of the example is very similar to the code of the exercise. The
+ example contains explanations 👩‍🏫, the exercise contains tasks 🚧 and hints
+ 🕵️‍♀️. If there are things that you don't understand about the code it's
+ better to look at the example. If there are things that are not clear
+ about what needs to done in the exercise after checking the tasks, let me
+ know.
+ </p>
 
  <h3>Exercise</h3>
+
+ <h4>
+ 🎯 The goal is to understand how to handle complex state logic in our
+ components that involves multiple sub-values
+ </h4>
+
  <p>
  Refactor the LoginForm component in{" "}
  <code>src/components/patterns/HookReducer/exercise/index.jsx</code> so it
- implements the following features:
- </p>
- <ul>
- <li>
- Implement the SET_ERRORS action in the reducer. It should add an errors
- object to the the state using the action.payload
- </li>
- <li>
- <code>dispatch</code> a SET_ERRORS action with the errors (output from
- the
- <code>validate(state.values)</code> invocation) as payload.
- </li>
- <li>
- <code>dispatch</code> the SET_ERRORS action only when the state of the
- input fields change. Hint, you need to use the useEffect second
- argument.
- </li>
- <li>
- Bonus, refactor the Hook Reducer so it's in a custom hook. You can call
- it useForm.
- </li>
- </ul>
+ implements the following:
+ </p>
+ <p>
+ <input type="checkbox" /> 1. Handles the SET_ERRORS action in the reducer.
+ It should add an errors object to the the state using the action.payload
+ </p>
+ <p>
+ <input type="checkbox" /> 2. <code>dispatch</code> a SET_ERRORS action
+ with the errors (output from the
+ <code>validate(state.values)</code> invocation) as payload.
+ </p>
+ <p>
+ <input type="checkbox" /> 3.<code>dispatch</code> the SET_ERRORS action
+ only when the state of the input fields change. Hint, you need to use the
+ useEffect second argument.
+ </p>
+
  <Exercise />
+ <hr />
+ <h3>Bonus exercise</h3>
+ <p>
+ <input type="checkbox" /> Create a custom hook from your Login Form. You
+ can call it useForm.
+ </p>
+ <p>
+ 🕵️‍♀️ Hints :
+ <ul>
+ <li>Extract the useReducer outside the Login Form</li>
+ <li>
+ Don't think of state only, but also functions that create "props".
+ </li>
+ </ul>
+ </p>
  </React.Fragment>
 );
 

src/components/patterns/HookReducer/example/index.jsx

@@ -2,42 +2,53 @@ import React from "react";
 
 const SET_FIELD_VALUE = "SET_FIELD_VALUE";
 
+// 👩‍🏫The state of a form is a relatively complex state logic.
+// Using a reducer also helps separate reads, from writes.
 function reducer(state, action) {
  switch (action.type) {
+ // 👩‍🏫reducers should respond to a given action
  case SET_FIELD_VALUE:
+ // 👩‍🏫reducers should not mutate the current state but create a new one
+ // (If you’re familiar with Redux, you already know how this works, but we have to mention it :)
  return {
  ...state,
  values: {
  ...state.values,
- ...action.payload
- }
+ ...action.payload,
+ },
  };
  default:
+ // 👩‍🏫reducers should return the current state if the received action is not a case to be handled
+ // (If you’re familiar with Redux, you already know all this, but we have to mention it anyway :)
  return state;
  }
 }
 
-const LoginForm = props => {
+const LoginForm = (props) => {
  const initialState = {
- values: props.initialValues
+ values: props.initialValues,
  };
- // https://reactjs.org/docs/hooks-reference.html#usereducer
+
+ // 👩‍🏫 useReducer accepts a reducer of type (state, action) => newState,
+ // and returns the current state paired with a dispatch method
  const [state, dispatch] = React.useReducer(reducer, initialState);
 
- const handleChange = fieldName => event => {
+ // 👩‍🏫 Notice we are using a closure here. As a mental model from the closure exercise we did before:
+ // add = (a) => (b) =>
+ const handleChange = (fieldName) => (event) => {
  event.preventDefault();
  dispatch({
  type: SET_FIELD_VALUE,
- payload: { [fieldName]: event.target.value }
+ payload: { [fieldName]: event.target.value },
  });
  };
 
- const getFieldProps = fieldName => ({
+ const getFieldProps = (fieldName) => ({
  value: state.values[fieldName],
- onChange: handleChange(fieldName)
+ onChange: handleChange(fieldName), // 👩‍🏫 fieldName gets "captured" in the handleChange closure
  });
 
- const handleSubmit = e => {
+ const handleSubmit = (e) => {
  e.preventDefault();
  alert(JSON.stringify(state.values));
  };
@@ -62,15 +73,12 @@ const LoginForm = props => {
 };
 
 const Example = () => (
- <React.Fragment>
- <p>Basic Login Form</p>
- <LoginForm
- initialValues={{
- password: "",
- userId: ""
- }}
- />
- </React.Fragment>
+ <LoginForm
+ initialValues={{
+ password: "",
+ userId: "",
+ }}
+ />
 );
 
 export default Example;

src/components/patterns/HookReducer/exercise/index.jsx

@@ -1,16 +1,16 @@
 import React from "react";
 
-// Using a reducer helps separate reads, from writes
 function reducer(state, action) {
  switch (action.type) {
- // TODO add a SET_ERRORS case that adds an erros key to the state with the action.payload
+ // 🚧 Add a SET_ERRORS case that adds an errors key to the state with the action.payload
+ // 🕵️‍♀️ You probably want to clear previous errors every time you do SET_ERRORS
  case "SET_FIELD_VALUE":
  return {
  ...state,
  values: {
  ...state.values,
- ...action.payload
- }
+ ...action.payload,
+ },
  };
  default:
  return state;
@@ -19,7 +19,8 @@ function reducer(state, action) {
 
 function LoginForm(props) {
  const { initialValues, onSubmit } = props;
- const validate = values => {
+ // 👮‍♀you don't have to edit this validate function
+ const validate = (values) => {
  let errors = {};
  if (!values.password) {
  errors.password = "Password is required";
@@ -32,36 +33,35 @@ function LoginForm(props) {
 
  const [state, dispatch] = React.useReducer(reducer, {
  values: initialValues,
- errors: {}
+ errors: {},
  });
 
  React.useEffect(() => {
  if (validate) {
  const errors = validate(state.values);
- // TODO  dispatch a SET_ERRORS action with the errors as payload
+ // 🚧 dispatch a SET_ERRORS action with the errors as payload
  }
- }, []); // TODO dispatch the SET_ERRORS action only when the state of the input fields change.
+ }, []); // 🚧 dispatch the SET_ERRORS action only when the state of the input fields change.
 
- // This is a function that returns another function so it creates a closure to capture fieldName
- const handleChange = fieldName => event => {
+ const handleChange = (fieldName) => (event) => {
  event.preventDefault();
  dispatch({
  type: "SET_FIELD_VALUE",
- payload: { [fieldName]: event.target.value }
+ payload: { [fieldName]: event.target.value },
  });
  };
 
- const handleSubmit = event => {
+ const handleSubmit = (event) => {
  event.preventDefault();
  const errors = validate(state.values);
  if (!Object.keys(errors).length) {
  onSubmit(state.values);
  }
  };
 
- const getFieldProps = fieldName => ({
+ const getFieldProps = (fieldName) => ({
  value: state.values[fieldName],
- onChange: handleChange(fieldName) // fieldName gets captured in the handleChange closure
+ onChange: handleChange(fieldName),
  });
 
  const { errors } = state;
@@ -95,9 +95,9 @@ const Exercise = () => (
  <LoginForm
  initialValues={{
  password: "",
- userId: ""
+ userId: "",
  }}
- onSubmit={values => {
+ onSubmit={(values) => {
  alert(JSON.stringify(values, null, 2));
  }}
  />