reduxjs / redux-essentials-example-app Goto Github PK

Example app for the Redux Essentials tutorial

Home Page: https://redux.js.org/tutorials/essentials/part-1-overview-concepts

JavaScript 17.17% HTML 1.10% CSS 50.94% TypeScript 30.78%

redux-essentials-example-app's Introduction

Redux Essentials Tutorial Example

This project contains the setup and code from the "Redux Essentials" tutorial example app in the Redux docs ( https://redux.js.org/tutorials/essentials/part-3-data-flow ).

The master branch has a single commit that already has the initial project configuration in place. You can use this as the starting point to follow along with the instructions from the tutorial.

The tutorial-steps-ts branch has the actual code commits from the tutorial. You can look at these to see how the official tutorial actually implements each piece of functionality along the way.

This project was bootstrapped with Vite, and is based on the official Redux Toolkit + Vite template.

Package Managers

This project is currently set up to use Yarn 4 as the package manager.

If you prefer to use another package manager, such as NPM, PNPM, or Bun, delete the "packageManager" section from package.json and the .yarnrc.yml and yarn.lock files, then install dependencies with your preferred package manager.

Available Scripts

In the project directory, you can run:

`yarn dev`

Runs the app in the development mode.
Open http://localhost:4173 to view it in the browser.

The page will reload if you make edits.

`yarn build`

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Learn More

You can learn more about building and deploying in the Vite docs.

To learn React, check out the React documentation.

redux-essentials-example-app's People

Contributors

Stargazers

Watchers

Forkers

pikitgb markponce ricardo-hdz jmz919 eltee00 gabriellimoni compilerd haraldsdev abdurrehman1234 baileydesign funct7 cocoa-salon klequis archanapradhan anookinov-training-ground dianahime regulae maryammal byronho24 daisycrego the-mann invoke-aizat educhin thegreatsong kana-e kanterbury amrit123456789 hi629 tonysorensen div12gau jt501 learnearnfun dagraham7 valkirin binarygrrl alexischilinski wdaimee gokturkgok bjvta haleykelling spomeara juliovalcarcel mohammedmuzemil1 svendp1988 vanessuniq ben-spector-cc flylady2 keerththanan daniellabios jharry444 nickschmitt atsteinberg amng9560 chang-nz chaseliu nl900 teja1122 gelizabeth wfelipe99 nchkhaidze joek1705 borishere grymyk jorgencarlsen dishantsthapit kapyab t-masaaki skytiantian reza-bm belushkin renaudf erwincabrera gribichex jdiefenbach83 danberkeland taiga-nakamura wadadones mike507 oybek9508 ryan-2341 1jgrant cookcm mert18 rahulcapoor forkingpaths2040 gnunesdev vriznet southppp22 zapalagrzegorz fof-github carefree-ladka dikshita-arora katy-kiss furyhawk no-yan eziohao tai02 dnodolf1212 abhishekfu pouya-pourparhizkar

redux-essentials-example-app's Issues

[Bug] Browser reload drops state updates

This issue appears to be similar to Issue #64.

I'm using the tutorial-steps branch of the tutorial, and I exercised the app immediately after adding SinglePostPage.

I had to make several modifications to 'package.json' in order to make the app run, as follows:

Update the msw to require "^0.38.0"
Update react-scripts to require "^5"
Run "git reset --hard 4ee39fb" in the project directory.
After 'yarn install, copy a patched 'getHttpsConfig.js' into react-scripts/config/`
After yarn install, run 'npx msw init public' from the project directory

With these changes in place, I think performed the tutorial steps to:

Add SinglePostPage
Update App.js as per the tutorial
Update PostsList.js as per the tutorial
Update Navbar.js as per the tutorial
Run the tutorial and add a post using "Save Page"

The third post appears in the app:

I then clicked reload in the (Chrome) browser. This causes the added post to be dropped:

I see similar behavior in `PostsList'. Immediately after clicking "Save Post", I see the added post:

After reload, the added post disappears:

I used breakpoints in the dispatch call to postAdded in SinglePostForm and postsSlice, and it appears that the value of state -- presumably coming from Provider -- is reset to its initial state after a refresh.

Sadly, I don't have the expertise to determine whether this is a bug in the tutorial, in @reduxjs/toolkit, or in redux itself.

I appreciate any guidance or workaround for ensuring that the app I'm building will behave as expected after a reload.

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

import React from 'react'
import { useSelector } from 'react-redux'

export const PostsList = () => {
  const posts = useSelector(state=> state.posts)
  console.log(posts) //undefined
  //console.log(123456)
  const renderedPosts = posts.map((post) => ( //Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <p className="post-content">{post.content.substring(0, 100)}</p>
    </article>
  ))
  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {renderedPosts}
    </section>
  )
}

sorry anybody can help me !!

SinglePost page needs fecthing too

I was building my own app using this essential and faced with this, so basically when we on SinglePost page and try to re-render the page it reloads and returns us nothing because there is no fetching data and inserting in redux store in the component, i think this is a mistake if not how to handle this?

tutorial vs repo confusion

Hi, newbie here trying to follow along with the tutorial at https://redux.js.org/tutorials/essentials/part-3-data-flow, which links to this repo.

Probably I'm confused, but I thought the completed tutorial would mirror the 'tutorial-steps' branch of this repo (as well as the linked sandbox at https://codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/tutorial-steps)?

But I don't see, for example, the file 'features/posts/postsSlice.js' in this repo, while it's referenced early and often in the tutorial.

Please help clarify my confusion. Thank you.

Error installing dependencies

When running either yarn install or npm install I get errors.

With npm:

$ npm install npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/react-router: Socket timeout npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings.

yarn.error.log:

Trace: Error: https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz: ESOCKETTIMEDOUT ...

Add a version with TypeScript?

I see a few small TypeScript examples linked from the docs but it says they go against recommended practices and I think they aren't as extensive as this example app. If I added TypeScript to this project, would it be useful if I submitted a PR to add it as an example for the docs?

Failed to compile

master branch.

I did yarn install, then replaced start in package.json with react-scripts --openssl-legacy-provider start

then i went yarn start, here is the error:

Failed to compile.

./node_modules/headers-polyfill/lib/index.mjs 259:53
Module parse failed: Unexpected token (259:53)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     this[_a] = {};
|     this[_b] = /* @__PURE__ */new Map();
>     if (["Headers", "HeadersPolyfill"].includes(init?.constructor.name) || init instanceof HeadersPolyfill) {
|       const initialHeaders = init;
|       initialHeaders.forEach((value, name) => {

Mock server sends notifications with incorrect creation time.

The request handler for receiving notifications does not process the "since" parameter:

redux-essentials-example-app/src/api/server.js

Lines 207 to 217 in 49fd0ea

 rest.get('/fakeApi/notifications', (req, res, ctx) => { 

 const numNotifications = getRandomInt(1, 5) 

 let notifications = generateRandomNotifications( 

 undefined, 

 numNotifications, 

 db 

 ) 

 return res(ctx.delay(ARTIFICIAL_DELAY_MS), ctx.json(notifications)) 

 }),

Attention to line 211:

redux-essentials-example-app/src/api/server.js

Line 211 in 49fd0ea

undefined,

As a result, in Redux Essentials, Part 6 notifications with an incorrect creation time are received.

New notifications appear lower in the list:

Maybe I didn't understand something, but it seems to me that it should not be so.
I fixed it with the following code:

Checkpoints 5 and 6 render posts as `[object Object]` in CodeSandbox

https://codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/checkpoint-5-createApi
https://codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/checkpoint-6-rtkqConversion

Doesn't happen locally, only in CodeSanbox

Error handling in 'postsSlice.js'

Thanks for writing this great tutorial especially for people like me to learn redux for the first time!
When I go through the code in postsSlice.js, I am wondering that maybe there's a small mistake about handling error for fetchPosts action.
In the extraReducers in postsSlice.js, when [fetchPosts.rejected],
we will update the state.error to state.error = action.error.message.

However, when I check the redux-toolkit docs, I find that
"if the promise failed and was not handled with rejectWithValue, dispatch the rejected action with a serialized version of the error value as action.error"
So maybe we should update the state.error to state.error = action.error?

I just start learning redux-toolkit and I probably not correctly understand the code. So if I am wrong please feel free to correct me.
Lastly, thanks a lot for your contribution to write this wonderful tutorial and it helps a lot to learn redux.

[BUG] addReaction.onQueryStarted should also update getPost(id) query cache.

In the RTK version of the tutorial, addReaction mutation optimistically updates the reaction data in the getPosts cache. But it should also update the cache for getPost(id) query as well. Otherwise, addReaction mutation is not reflected in the SinglePostPage.

I cannot contribute a PR because this version of code doesn't have a corresponding branch (it only has a tag).

redux-essentials-example-app/src/features/api/apiSlice.js

Lines 43 to 60 in dcc6064

 async onQueryStarted({ postId, reaction }, { dispatch, queryFulfilled }) { 

 // `updateQueryData` requires the endpoint name and cache key arguments, 

 // so it knows which piece of cache state to update 

 const patchResult = dispatch( 

 apiSlice.util.updateQueryData('getPosts', undefined, (draft) => { 

 // The `draft` is Immer-wrapped and can be "mutated" like in createSlice 

 const post = draft.find((post) => post.id === postId) 

 if (post) { 

 post.reactions[reaction]++ 

 } 

 }) 

 ) 

 try { 

 await queryFulfilled 

 } catch { 

 patchResult.undo() 

 } 

 },

When compiling the project can't resolve the file immer.cjs.development.js

I'm following the redux tutorial from the their docs, and when I start the project it always shows that error. Can you help me with this issue?

error:03000086:digital envelope routines::initialization error

When I downloaded the project as an archive and tried to run it in VSCode, I got the following errors.

> yarn start
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:417:16)
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:452:10
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\webpack\lib\NormalModule.js:323:13
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\DelphiStuff\_WebTech\TestJS\40.redux-essentials-example\redux-essentials-example\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Typescript versions of client.js and server.js files

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!

[Bug] Browser reload of UserPage crashes app

When I click the "Reload" button in Chrome, the "redux-essentials-example" app crashes with an unhandled exception.

I'm using the "Tutorial-Steps" branch of the app. I've updated it to use the current version of msw and to avoid the openSSL issues.

The log (saved by using the "Save as..." command from Chrome developer tools) is:

index.js:683 [MSW] Mocking enabled.
UserPage.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
    at UserPage.js:17:1
    at recomputationWrapper (index.js:67:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:81:1)
    at memoized (defaultMemoize.js:123:1)
    at selectFromResult (UserPage.js:30:1)
    at recomputationWrapper (index.js:67:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:81:1)
    at memoized (defaultMemoize.js:123:1)
(anonymous) @ UserPage.js:17
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
selectFromResult @ UserPage.js:30
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
(anonymous) @ buildHooks.ts:928
useSelectorWithStoreAndSubscription @ useSelector.js:29
useSelector @ useSelector.js:129
useQueryState @ buildHooks.ts:926
useQuery @ buildHooks.ts:963
UserPage @ UserPage.js:25
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <UserPage> component:

    at UserPage (http://localhost:5099/static/js/bundle.js:2279:3)
    at Route (http://localhost:5099/static/js/bundle.js:121939:29)
    at Switch (http://localhost:5099/static/js/bundle.js:122108:29)
    at div
    at Router (http://localhost:5099/static/js/bundle.js:121611:30)
    at BrowserRouter (http://localhost:5099/static/js/bundle.js:121126:35)
    at App
    at Provider (http://localhost:5099/static/js/bundle.js:118609:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
UserPage.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filter')
    at UserPage.js:17:1
    at recomputationWrapper (index.js:67:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:81:1)
    at memoized (defaultMemoize.js:123:1)
    at selectFromResult (UserPage.js:30:1)
    at recomputationWrapper (index.js:67:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:81:1)
    at memoized (defaultMemoize.js:123:1)
(anonymous) @ UserPage.js:17
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
selectFromResult @ UserPage.js:30
recomputationWrapper @ index.js:67
memoized @ defaultMemoize.js:123
dependenciesChecker @ index.js:81
memoized @ defaultMemoize.js:123
(anonymous) @ buildHooks.ts:928
useSelectorWithStoreAndSubscription @ useSelector.js:29
useSelector @ useSelector.js:129
useQueryState @ buildHooks.ts:926
useQuery @ buildHooks.ts:963
UserPage @ UserPage.js:25
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:19
await in start (async)
./src/index.js @ index.js:29
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
rest-deps.js:82 [MSW] 13:01:35 GET /fakeApi/users (200 OK)

When I step through the failure in vscode, I see that at line 29 of 'node_modules/react-redux/es/hooks/useSelector.js'. the value assigned to newSelectedState is undefined. Here is the apparently failing code fragment:

  try {
    if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {
      var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references

      if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {
        selectedState = newSelectedState;
      } else {
        selectedState = latestSelectedState.current;
      }
    } else {
      selectedState = latestSelectedState.current;
    }
  } catch (err) {
    if (latestSubscriptionCallbackError.current) {
      err.message += "\nThe error may be correlated with this previous error:\n" + latestSubscriptionCallbackError.current.stack + "\n\n";
    }

    throw err;
  }

The line (from the above code) that seems to be causing the issue is:

var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references

The RHS of this assignment ends up being undefined, and thus so is the value of newSelectedState. I've tried stepping into the selector(storeState) call, but I'm not familiar enough with redux internals to make sense of the call chain.

This value of newSelectedState is returned as the value of selectedState from useSelector. This means that the value of user in UserPage (at line 12) is undefined. So far as I can tell, this throws an (uncaught) exception that in turn causes the above console complaints.

Here is the value of storeState during the failure sequence just before calling selector(storeState):

{
  notifications: {
    ids: [],
    entities: {},
  },
  api: {
    queries: {
      "getUsers(undefined)": {
        status: "pending",
        endpointName: "getUsers",
        requestId: "HHXFluhAgUyqda1kPubaK",
        startedTimeStamp: 1692900474182,
      },
    },
    mutations: {},
    provided: {},
    subscriptions: {},
    config: {
      online: true,
      focused: true,
      middlewareRegistered: true,
      refetchOnFocus: false,
      refetchOnReconnect: false,
      refetchOnMountOrArgChange: false,
      keepUnusedDataFor: 60,
      reducerPath: "api",
    },
  },
}

I don't know enough about how redux is supposed to behave to understand whether this value of storeState is correct or not. Since this seems to be happening inside a redux hook ('useSelector.js'), I don't know the tool enough to dig further.

If this is simply a bug with the tutorial, then I'll ignore it. If this means that my app that uses redux will fail in a similar way, then I'll want a work-around.

I appreciate your attention!

Property 'unwrap' does not exist on type 'AsyncThunkAction<any, void, {}>'.

I'm trying to get the AddPostForm component to work but I'm running into an error on the onSavePostClicked function. I'm currently on part 5 of the redux essentials tutorial.

Here's a snippet of AddPostForm which contains the onSavePostClicked function:

export const AddPostForm = () => {
    // omit useState and onChanged functions
    const dispatch = useDispatch();
    const users = useSelector((state: RootState) => state.users.users)

    const canSave = [title, content, userId].every(Boolean) && addRequestStatus === "idle";

    const onSavePostClicked = async () => {
        if (canSave) {
            try {
                setAddRequestStatus('pending')
                await dispatch(addNewPost({ title, content, user: userId })).unwrap()
                setTitle('')
                setContent('')
                setUserId('')
            } catch (err) {
                console.error('Failed to save the post: ', err)
            } finally {
                setAddRequestStatus('idle')
            }
        }
    }

    // omit return value 
}

There's specifically an error on this line

await dispatch(addNewPost({ title, content, user: userId })).unwrap()

The errors are:

Expected 0 arguments, but got 1.
Property 'unwrap' does not exist on type 'AsyncThunkAction<any, void, {}>'.

Here's the definition of addNewPost:

export const addNewPost = createAsyncThunk('posts/addNewPost', async initialPost => {
    // send initial date to the fake api server
    const response = await client.post('/fakeApi/posts', initialPost)
    // the response includes the complete post object, including unique id
    return response.data
})

I followed through the tutorial and didn't see any difference in my code. The only difference is that I was replicating things through Typescript. Would love it if you guys can guide me in the right direction for solving this.

Notifications are missing `isNew` and `read` fields

The tutorial says: "Our fake API is already sending back the notification entries with isNew and read fields, so we can use those in our code."

But the notifications sent from the server don't seem to have those fields:

redux-essentials-example-app/src/api/server.js

Lines 290 to 301 in 49fd0ea

 const notifications = [...Array(numNotifications)].map(() => { 

 const user = randomFromArray(db.user.getAll()) 

 const template = randomFromArray(notificationTemplates) 

 return { 

 id: nanoid(), 

 date: faker.date.between(pastDate, now).toISOString(), 

 message: template, 

 user: user.id, 

 } 

 }) 

 return notifications

Failed when adding Link in Navbar

I was following along redux essentials part 4 from documentation. When I add in Navbar to go to all posts components, the page doesn't show and throw below errors.

index.tsx:532 Uncaught TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
    at LinkWithRef (index.tsx:532:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateForwardRef (react-dom.development.js:17044:1)
    at beginWork (react-dom.development.js:19098:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21881:1)
    at updateContainer (react-dom.development.js:25482:1)
    at react-dom.development.js:26021:1
    at unbatchedUpdates (react-dom.development.js:22431:1)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1)
    at Object.render (react-dom.development.js:26103:1)
    at start (index.js:15:1)
LinkWithRef @ index.tsx:532
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
start @ index.js:15
await in start (async)
(anonymous) @ index.js:25
./src/index.js @ index.js:26
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:26
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3000/static/js/vendors~main.chunk.js:129488:7)
    at div
    at div
    at section
    at nav
    at Navbar
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:132132:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:130216:35)
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:126718:20)

Error with command: npm install

PS C:\Users\p-c\Downloads\Github\redux-essentials-example-app> npm install
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@typescript-eslint%2fexperimental-utils: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\p-c\AppData\Local\npm-cache_logs\2022-05-29T16_32_32_683Z-debug-0.log
PS C:\Users\p-c\Downloads\Github\redux-essentials-example-app> npm install --legacy-peer-deps
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@typescript-eslint%2fexperimental-utils: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\p-c\AppData\Local\npm-cache_logs\2022-05-29T16_39_29_873Z-debug-0.log

posts.map() is not a function

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
reducer: () => ({}),
})

changing the above to this fixes it (but why):
export const store = configureStore({
reducer: {
posts: postsReducer,
},
})

Cannot read property 'getItem' of null

src/api/server.js:31:38

if (useSeededRNG) {
  let randomSeedString = localStorage.getItem('randomTimestampSeed')
  let seedDate

[BUG] Missing/Broken @mswjs files

I'm seeing 28 warnings, in two groups of 14 each, pertaining to @mswjs each time I start the redux-essentials-example app using yarn start. I'm pretty sure this is, in turn, causing the app itself to crash while using https. I run all this on a robust AWS EC2 instance running a recent version Rocky Linux.

I'm using version of the tutorial forked from this repo:

git clone [email protected]:reduxjs/redux-essentials-example-app.git

I've already worked around the known OpenSSL issue. I run multiple other apps on the same platform using https with no complaints -- those each use axios for all interactions between the browser and server and there are no issues with installed certs.

Here are the complaints I see at the command line (an SSH client) when I start the app with vscode' (my IDE) using launch.json`:

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/createInterceptor.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/createInterceptor.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/index.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/index.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/bufferFrom.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/bufferFrom.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/createEvent.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/createEvent.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/remote.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/remote.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/getCleanUrl.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/getCleanUrl.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/parseJson.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/parseJson.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/toIsoResponse.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/toIsoResponse.ts'

Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/uuid.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/uuid.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/createInterceptor.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/createInterceptor.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/createInterceptor.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/index.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/XMLHttpRequestOverride.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/index.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/polyfills/EventPolyfill.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/utils/bufferFrom.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/bufferFrom.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/bufferFrom.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/utils/createEvent.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/createEvent.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/XMLHttpRequest/utils/createEvent.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/remote.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/remote.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/remote.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/utils/getCleanUrl.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/getCleanUrl.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/getCleanUrl.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/utils/parseJson.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/parseJson.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/parseJson.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/utils/toIsoResponse.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/toIsoResponse.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/toIsoResponse.ts'

WARNING in ./node_modules/msw/node_modules/@mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/uuid.ts' file: Error: ENOENT: no such file or directory, open '/home/tms/redux_play/essentials/node_modules/msw/node_modules/@mswjs/interceptors/src/utils/uuid.ts'

webpack compiled with 14 warnings

Here is the (Chrome) console complaint when I attempt to launch the app using https:

Uncaught Error Error: [MSW] Failed to register the Service Worker:

Failed to register a ServiceWorker for scope ('https://localhost:5099/') with script ('https://localhost:5099/mockServiceWorker.js'): An SSL certificate error occurred when fetching the script.
    at <anonymous> (/home/tms/redux_play/essentials/node_modules/msw/lib/esm/index.js:670:1)
    at fulfilled (/home/tms/redux_play/essentials/node_modules/msw/lib/esm/RequestHandler-deps.js:34:1)
    --- await ---
    at ./src/index.js (/home/tms/redux_play/essentials/src/index.js:25:1)
    at options.factory (/home/tms/redux_play/essentials/webpack/runtime/react refresh:6:1)
    at __webpack_require__ (/home/tms/redux_play/essentials/webpack/bootstrap:24:1)
    at <anonymous> (/home/tms/redux_play/essentials/webpack/startup:7:1)
    at <anonymous> (localhost꞉5099/static/js/bundle.js:165010:12)

I note that file generating the browser complaints (public/mockServiceWorker.js) is in the github repo. I'm using it unchanged.

These warnings are in two groups of 14 complaints each, and each appears to have a similar pattern.

Incorrect import path in each of the first 14 complaints

The path reported in the first of each 14 lines of the complaint is:
```
node_modules/msw/node_modules/@mswjs/interceptors/src/<filename>.ts
```
My node_modules has no 'src' directory. It has a 'lib' directory that contains the following:
```
createInterceptor.d.ts
createInterceptor.js
createInterceptor.js.map
index.d.ts
index.js
index.js.map
remote.d.ts
remote.js
remote.js.map
```
Incorrect source path in each of the second group

The path reported in each file of the second group of 14 complains is the same as above:
```
node_modules/msw/node_modules/@mswjs/interceptors/src/<filename>.ts
```
I used "find" to search for occurrences of the first of the 15 filenames ('createInterceptor.ts') and found none.

Here are the 14 missing files:

'createInterceptor.ts'
'index.ts'
'interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts'
'interceptors/XMLHttpRequest/index.ts'
'interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts'
'interceptors/XMLHttpRequest/polyfills/ProgressEventPolyfill.ts'
'interceptors/XMLHttpRequest/utils/bufferFrom.ts'
'interceptors/XMLHttpRequest/utils/createEvent.ts'
'interceptors/fetch/index.ts'
'remote.ts'
'utils/getCleanUrl.ts'
'utils/parseJson.ts'
'utils/toIsoResponse.ts'
'utils/uuid.ts'

I haven't worked through the tutorial, and so I don't have any insight into how serious this is. I very much prefer to provide only an https listener on each open port.

I appreciate your attention, and even more so I appreciate all the good and hard work already invested in this excellent product and tutorial.

PostExcerpt & error in section 'Displaying Loading State'

Hi. Haven't updated my way of doing Redux in years. Was going through your tutorial to do so. Very much liking retux-toolkit!

Noticed in Displaying Loading State you introduce the variable error and the component <PostExcerpt />. I didn't find either in any of the projects branches. Was able to fill those in myself. Don't know if this is part of your focusing on the main points and not intending to be code complete or if the project & tutorial are a work in progress.

Either way, thanks for another great tutorial! (I've been over most of your blog in the past.) I'm happy to post what I find along the way, do review for you (if it isn't complete) and/or contribute code.

Error when I used npm start

When I installed the packages via npm i then I run the npm start and I got the following error:

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/workspaces/redux-essentials-example-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:471:10)
at /workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:503:5
at /workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:358:12
at /workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/workspaces/redux-essentials-example-app/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/workspaces/redux-essentials-example-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:417:16)
at /workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:452:10
at /workspaces/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:323:13
at /workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/workspaces/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /workspaces/redux-essentials-example-app/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.9.0

Can Node.js version be the reason why the command fails because Node v19 came to end of its life at 2023-06-01 ?

where is the postsSlice file

i was following the redux-essentials-tutorial i have reached the Redux Essentials, Part 5: Async Logic and Data Fetching there is a PostsSlice File in the example code i have downloaded the redux projectFiles regarding that section which was provided but There is no PostsSlice File in the repo because of That i cant follow up with the tutorial

npm install problem

Just cloned the repo and when running npm install it gives me error the msw module command failed

Package needs update

React 17 needs to be updated to React 18 and other packages need to be updated.

Does not work with node 17

If install and start is executed with node 16, the application works fine. However, with node 17 and error occurs. It would help if there were a requirements section in the readme to inform which node version this can be used with. Error:

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:417:16)
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:452:10
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/webpack/lib/NormalModule.js:323:13
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/robertdelorimier/source/git_not_gloo/redux-essentials-example-app/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

	rest.get('/fakeApi/notifications', (req, res, ctx) => {
	const numNotifications = getRandomInt(1, 5)

	let notifications = generateRandomNotifications(
	undefined,
	numNotifications,
	db
	)

	return res(ctx.delay(ARTIFICIAL_DELAY_MS), ctx.json(notifications))
	}),

	async onQueryStarted({ postId, reaction }, { dispatch, queryFulfilled }) {
	// `updateQueryData` requires the endpoint name and cache key arguments,
	// so it knows which piece of cache state to update
	const patchResult = dispatch(
	apiSlice.util.updateQueryData('getPosts', undefined, (draft) => {
	// The `draft` is Immer-wrapped and can be "mutated" like in createSlice
	const post = draft.find((post) => post.id === postId)
	if (post) {
	post.reactions[reaction]++
	}
	})
	)
	try {
	await queryFulfilled
	} catch {
	patchResult.undo()
	}
	},

	const notifications = [...Array(numNotifications)].map(() => {
	const user = randomFromArray(db.user.getAll())
	const template = randomFromArray(notificationTemplates)
	return {
	id: nanoid(),
	date: faker.date.between(pastDate, now).toISOString(),
	message: template,
	user: user.id,
	}
	})

	return notifications

reduxjs / redux-essentials-example-app Goto Github PK

redux-essentials-example-app's Introduction

Redux Essentials Tutorial Example

Package Managers

Available Scripts

yarn dev

yarn build

Learn More

redux-essentials-example-app's People

Contributors

Stargazers

Watchers

Forkers

redux-essentials-example-app's Issues

When I installed the packages via npm i then I run the npm start and I got the following error:

Can Node.js version be the reason why the command fails because Node v19 came to end of its life at 2023-06-01 ?

Recommend Projects

Recommend Topics

Recommend Org

`yarn dev`

`yarn build`