Typescript versions of client.js and server.js files

[timofeysie]

Hi,

I've been writing some articles about converting your sample apps to Typescript. From the counter example to the social media feed app, I have implemented the Redux Essential sample code into Typescript.

However, starting with the Async Logic and Data Fetching in part 5 of the Redux Essentials trail, the sample API written in vanilla Javascript poses a problem. Using the fake API causes Unexpected token '<', "<!DOCTYPE "... is not valid JSON 304 Not Modified errors.

It may be possible to configure the project to work with .js as well as .ts files, however I haven't found a way to make that work yet.

Converting the client.js and server.js files to .ts manually would be time consuming, so I thought I would ask here if there are any plans for a Typescript version of this series first. As a primarily frontend developer, I try to stay away from implementing backend services, so not sure if I would take this on myself.

Any ideas or feedback on this would be much appreciated!

[markerikson]

Yeah, I actually did recently make the decision to convert the entire "Essentials" tutorial to be TS-first.

However, I don't yet have any idea when I'll be able to spend the time to do that :)

I am kinda confused on the request error you're describing. That doesn't seem anything that would be related to TS at all - that's some kind of a request/URL mismatch.

[timofeysie]

@markerikson I'm not sure what the issue is specifically either. I have a PR for the changes when introducing the Thunk to fetch the data here if you want to see the changes.

I may have missed something in the PostsList.tsx file update, but ran out of time myself to work on this.

Here is a screen shot:

[markerikson]

Hmm. The mock server shouldn't have any relation to TS syntax at all, though - it's just mocking out the AJAX request handling at runtime, and it doesn't matter at all what syntax any of the files are using.

[timofeysie]

I'm not sure what's going on either. If I use axios and a different url, then the get works.

You can ignore the fact that my TypeOrm implementation is not creating full post objects in the Nest.js demo I created. As I said, I'm a frontend dev and this is not usually my focus. Anyhow, you answered the question about plans for a TS version, so we can close this issue.

[dmitrybv]

I managed to translate api/client.js and api/server.js to TypeScript. I used the https://github.com/timofeysie/redux-typescript-example project as a source project for translation.

In api/server.js, I had to get rid of and change the following dependent packages.

import { rest, setupWorker } from 'msw'
import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'
import { nanoid } from '@reduxjs/toolkit'
//import faker from 'faker'
import { faker } from '@faker-js/faker'
//import seedrandom from 'seedrandom'
import { Server as MockSocketServer } from 'mock-socket'
//import { setRandom } from 'txtgen'

I can't figure out if this worsened the randomization of the getRandomInt function.

You can look at my fork: https://github.com/dmitrybv/redux-typescript-example

Сommit: https://github.com/dmitrybv/redux-typescript-example/commit/c0d46eef92abf5c0f50d03a7f341a9a69b7509bb

[timofeysie]

Given the new official docs no longer support create-react-app, I'm guessing that Next.js would be the next possible option for demonstrating Redux with React. As pointed out in this question: If you have a custom App with getInitialProps then the Automatic Static Optimization that Next.js provides will be disabled for all pages.

The solution provided there is to create a Redux Provider as a wrapper to wrap components so the redux context will be automatically initialized and provided within that component.

@markerikson, I'm curious about your view on a future iteration of the redux essentials example app, and if this would indeed be Next.js based, and also include Typescript.

[markerikson]

@timofeysie : yeah, I recently made up my mind to redo the "Essentials" tutorial as TS-first. Related to that, we also ought to add an official Vite RTK+TS template, and I would redo the tutorial content on top of that.

Don't have time to do either of those any time soon, though - work is busy, got several conferences coming up, and all my maintainer time is focused on RTK 2.0 right now.

I do not want to base the tutorial off of Next, because that adds significantly more complexity in terms of setup.