Could you write in more detail how to run the mock server?

[dmitrybv]

Hello. Could you write in more detail how to run the mock server?

[timofeysie]

Hi @dmitrybv , The mock server supplies responses for the "fakeApi" used in the Redux Essentials. It's not going to work with Typescript as both the client and server files are plain Javascript. This is kind of a blocker for this project, as I describe in the "Fetching error" section of my article about converting the Redux Essentials sample app to TypeScript. I haven't copied over the notes from there into the readme here yet, but that's where the latest content on the subject I have goes. I'm not sure yet what the easiest way to handle the mock server Javascript code is. I have implemented my own backend for this project using Nestjs and Mongo, but that is not really my area of expertise, and it is still a work in progress.

You can still read more about the mock server in step 5 of the Redux Essentials trail. I also raised an issue about this there.

Let me know if I can help any more. Since I didn't create that,

[dmitrybv]

I replaced the lines in postsSlice.ts

// export const fetchPosts: any = createAsyncThunk(
//     "posts/fetchPosts",
//     async () => {
//         const response = await axios.get(API_URL+"/posts");
//         return response.data;
//     }
// );

const dateSub10 = sub(new Date(), { minutes: 10 }).toISOString();

const initialStatePosts: Post[] = [
    {
        id: "1",
        title: "First Post!",
        content: "Hello!",
        user: "0",
        date: dateSub10,
        reactions: { thumbsUp: 0, hooray: 0, heart: 0, rocket: 0, eyes: 0 },
    },
    {
        id: "2",
        title: "Second Post",
        content: "More text",
        user: "1",
        date: dateSub10,
        reactions: { thumbsUp: 0, hooray: 0, heart: 0, rocket: 0, eyes: 0 },
    },
];

export const fetchPosts: any = createAsyncThunk(
    "posts/fetchPosts",
    async () => {
         return new Promise<Post[]>((resolve, reject) => {
           setTimeout(() => {
             if (Math.random() > 0.95) {
               reject(new Error('Something bad happened'));
             } else {
               resolve(initialStatePosts);
             }
           }, 1500);
         });
    }
);

And the application partially began to work. At least the list of posts began to be issued.

Does it make sense to use axios and external calls in order to show an example of how the frontend application works? There is so much work to be done to set up external calls. Either set up an external server, or set up a MockServer.

[timofeysie]

Yes, that's probably the easiest way to go. My plan was to take the code as a blueprint for best practices and also add real-world functionality that the demo is missing. This would include authentication and an actual backend. With that in mind, it seemed like a good idea to start with a real backend to deal with the async data section. I think it's not for every frontend dev, but since this would be a kind of advanced exercise, it seems practical for me. Honestly, the backend took me about 30 minutes to scaffold the posts API crud functions. I have other Nodejs apps that I want to update, so also was testing out various hosts now that Heroku is a paid service.

Anyhow, thanks for your input on this matter. For someone who just wants to focus on the Redux with Typescript, that's the best solution.

Do you have any plans to continue on to the next step: Redux Essentials, Part 6: Performance and Normalizing Data? I am half way through that section now and will update this repo with that soon.

[dmitrybv]

I just started learning Redux and am learning TypeScript at the same time. So I'm still far from Part 6.

[dmitrybv]

Do I see it correctly that there is no full-fledged Demo project written in TypeScript in the official React documentation now? And for this reason you created this project and rewrite JS Demo projects in TypeScript?

[dmitrybv]

Do you use this project https://github.com/reduxjs/redux-essentials-example-app to convert JS code to TypeScript?

[dmitrybv]

After I added next code

import { worker } from './api/server';
worker.start({ onUnhandledRequest: 'bypass' });

to src\index.tsx

and installed required packages for server.js

I started to get strange compiling errors like this:

SyntaxError: C:\DelphiStuff\_WebTech\TestJS\39.redux-typescript-example-main\src\features\posts\EditPostForm.t
Failed to compile.
Failed to compile.
Failed to compile.

./src/features/posts/EditPostForm.tsx 16:32
Module parse failed: Unexpected token (16:32)
You may need an appropriate loader to handle this file type.
|     return selectPostById(state, postId);
|   });
>   var _useState = useState(post?.title),
|     _useState2 = _slicedToArray(_useState, 2),
|     title = _useState2[0], 

Have you experienced this?

[timofeysie]

Regarding the project. From the beginning I started the app using create react app with the typescript flag and wrote about converting the counter example as detailed in this article:

npx create-react-app redux-essentials-example --template redux

I did not take the completed project and convert the whole thing. If you look at the commit history for this project, you should see a commit for each step in the tutorials.

Starting is step 3 of the redux essentials trail I went through each step, using the code as introduced in the tutorials and converted each step to typescript one at a time as show in this article.

If you are just getting started with this, and want to run a TypeScript version, I would recommend just looking at the code at the end of step-4: https://github.com/timofeysie/redux-typescript-example/tree/part-4-reaction-buttons

In step 5, the fakeApi is starting to get used, which causes all kinds of weird issues that I can't help you with. You could create demo data with promises as you showed before.

[dmitrybv]

In the article https://timothycurchod.com/writings/async-logic-and-data-fetching-in-typescript you writes -

The thing is, this is all about async data fetching with Typescript. I could create a simple Next.js backend for this app pretty easily.

It is NestJS, not Next.js. Next.js is for frontend . NestJS for backend.

[timofeysie]

Good catch @dmitrybv! I think I was rushing a bit when I wrote that. Since the React team has published it's new docs that no longer support create-react-app (which this project was started with), it means the Redux team will also be updating their docs with new material, meaning this project will become a bit of a dead end. I think it's still helpful for now for people who want to work on a current project that was started with the previously standard method. I will have to ask the doc maintainers what option they will be using for their new documentation.

[dmitrybv]

You wrote allowJs in tsconfig.json two times.

[dmitrybv]

I managed to convert client.js, server.js to TypeScript and make it work in fetchPosts You can look at my fork: https://github.com/dmitrybv/redux-typescript-example

[timofeysie]

That's great work @dmitrybv. I had a look at the TS errors when evaluating converting those files, and thought it would take a while. You should let the official app maintainer Mark Erikson know on the ticket I raised there. I will have to add to this project the ability to either use the fakeApi or your own custom API by setting the REACT_APP_API_URL in the .env file.