From 7a666950549e15839813429442c283c7082ccf26 Mon Sep 17 00:00:00 2001 From: Abdur Rehman Date: Wed, 16 Jul 2025 16:34:12 +0500 Subject: [PATCH] docs(tutorials): update file extensions to .ts/.tsx in essentials/part-2-app-structure Signed-off-by: Abdur Rehman --- docs/tutorials/essentials/part-2-app-structure.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorials/essentials/part-2-app-structure.md b/docs/tutorials/essentials/part-2-app-structure.md index 8af60eea52..8d7f8e5e7c 100644 --- a/docs/tutorials/essentials/part-2-app-structure.md +++ b/docs/tutorials/essentials/part-2-app-structure.md @@ -655,7 +655,7 @@ See [the Redux Thunk docs](../../usage/writing-logic-thunks.mdx), the post [What Earlier, we saw what a standalone React `` component looks like. Our React+Redux app has a similar `` component, but it does a few things differently. -We'll start by looking at the `Counter.js` component file: +We'll start by looking at the `Counter.tsx` component file: ```tsx title="features/counter/Counter.tsx" import { useState } from 'react' @@ -852,7 +852,7 @@ If you're not sure where to put something, here are some common rules of thumb f This is also a good example of how to think about forms in Redux in general. **Most form state probably shouldn't be kept in Redux.** Instead, keep the data in your form components as you're editing it, and then dispatch Redux actions to update the store when the user is done. -One other thing to note before we move on: remember that `incrementAsync` thunk from `counterSlice.js`? We're using it here in this component. Notice that we use it the same way we dispatch the other normal action creators. This component doesn't care whether we're dispatching a normal action or starting some async logic. It only knows that when you click that button, it dispatches something. +One other thing to note before we move on: remember that `incrementAsync` thunk from `counterSlice.ts`? We're using it here in this component. Notice that we use it the same way we dispatch the other normal action creators. This component doesn't care whether we're dispatching a normal action or starting some async logic. It only knows that when you click that button, it dispatches something. ## Providing the Store @@ -887,7 +887,7 @@ root.render( We always have to call `root.render()` to tell React to start rendering our root `` component. In order for our hooks like `useSelector` to work right, we need to use a component called `` to pass down the Redux store behind the scenes so they can access it. -We already created our store in `app/store.js`, so we can import it here. Then, we put our `` component around the whole ``, and pass in the store: ``. +We already created our store in `app/store.ts`, so we can import it here. Then, we put our `` component around the whole ``, and pass in the store: ``. Now, any React components that call `useSelector` or `useDispatch` will be talking to the Redux store we gave to the ``.