Skip to content

Commit

Permalink
Update intermediate-tutorial.md (#405)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
thoughtworks-tcaceres authored Mar 4, 2020
1 parent ae39737 commit d2f2a51
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/tutorials/intermediate-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit d2f2a51

Please sign in to comment.