From d2f2a5194e0c1c15cc1edcdf8b26916e8a5ab32f Mon Sep 17 00:00:00 2001 From: Tyler Caceres Date: Wed, 4 Mar 2020 11:29:44 -0500 Subject: [PATCH] Update intermediate-tutorial.md (#405) minor fixes - 'ADD_TODO" --> 'ADD_TODO' (quotation mark fix) - there's a couple other problems -> there are a couple of other problems (changes pluralization of sentence / grammar) --- docs/tutorials/intermediate-tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorials/intermediate-tutorial.md b/docs/tutorials/intermediate-tutorial.md index e7fb8bf252..e98c68f134 100644 --- a/docs/tutorials/intermediate-tutorial.md +++ b/docs/tutorials/intermediate-tutorial.md @@ -260,7 +260,7 @@ The first step is to copy `reducers/todos.spec.js` over to `features/todos/todos Once that is done, we need to update the tests to match how RTK works. -The first issue is that the test file hardcodes action types like `'ADD_TODO"`. RTK's action types look like `'todos/addTodo'`. We can reference that by also importing the action creators from the todos slice, and replacing the original type constants in the test with `addTodo.type`. +The first issue is that the test file hardcodes action types like `'ADD_TODO'`. RTK's action types look like `'todos/addTodo'`. We can reference that by also importing the action creators from the todos slice, and replacing the original type constants in the test with `addTodo.type`. The other problem is that the action objects in the tests look like `{type, id, text}`, whereas RTK always puts those extra values inside `action.payload`. So, we need to modify the test actions to match that. @@ -391,7 +391,7 @@ While we could have kept the imported function named as `todos` so that we can u If we reload the app, we should still see that `state.todos` is an empty array. But, if we click on "Add Todo", nothing will happen. We're still dispatching actions whose type is `'ADD_TODO'`, while our todos slice is looking for an action type of `'todos/addTodo'`. We need to import the correct action creator and use it in the `AddTodo.js` file. -While we're at it, there's a couple other problems with how the `AddTodo` component is written. First, it's currently using a React "callback ref" to read the current text value from the input when you click "Add Todo". This works, but the standard "React way" to handle form fields is with the "controlled inputs" pattern, where the current field value is stored in the component's state. +While we're at it, there are a couple of other problems with how the `AddTodo` component is written. First, it's currently using a React "callback ref" to read the current text value from the input when you click "Add Todo". This works, but the standard "React way" to handle form fields is with the "controlled inputs" pattern, where the current field value is stored in the component's state. Second, the connected component is getting `dispatch` as a prop. Again, this works, but the normal way to use connect is to [pass action creator functions to `connect`](https://react-redux.js.org/using-react-redux/connect-mapdispatch), and then dispatch the actions by calling the functions that were passed in as props.