How to get error message in terminal when using Redux React

user_14461207 0
Viewed 43

I have been doing some Redux-React tutorials but hit a snag when one of the lines of code seems to cause the browser to go blank (and otherwise providing no error messages in the terminal). I'm wondering if anyone knows of a way to get some sort of error diagnostics in the terminal for Redux-React code (when running npm run dev) that would be helpful in finding the root of the issue.

The line of code is:

const numOfCakes = useSelector((state) => state.cake.numOfCakes)

Which works if I replaced it with

const numOfCakes = 3

The code is in the file CakeView.jsx (from the tutorial)

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

export const CakeView = () => {
    const numOfCakes = useSelector((state) => state.cake.numOfCakes)
    return (
      <div>
          <h2>Number of cakes - { numOfCakes } </h2>
          <button>Order cake</button>
          <button>Restock cakes</button>
      </div>
    )
}

This makes reference to the code in the file , also from the same tutorial:

import { createSlice } from '@reduxjs/toolkit'
import axios from 'axios'

const initialState = {
    numOfCakes: 10
}

const cakeSlice = createSlice({
    name: 'cake',
    initialState,
    reducers: {
        ordered: (state) => {
            state.numOfCakes--
        },
        restocked: (state, action) => {
            state.numOfCakes += action.payload
        },
    },
})

export default cakeSlice.reducer
export const { ordered, restocked } = cakeSlice.actions

I'm not sure what I may doing wrong. I've gone over the video tutorials multiple times checking but they seem to be the same. Maybe I'm so caught up in it that I'm missing something obvious. If the problem is not obviously in one of these files, I'm hoping someone can suggest some sort of extension (I'm using VS Code) that would issue better diagnostics. (The link is of a tutorial that is 27th in a series of 31 videos so it's a bit of stuff to work through although the videos are short and quite well done, imo...even if I am stumbled by this particular issue.)

Any help greatly appreciated!

redux reactjs diagnostics ide
1 Answers

You can log from all parts of the code and modify it whenever a variable has an unexpected value.

You can use actionCreators to execute code delays or asynchronous and check the code in different modes. In the same situations as pending or success or error, and also at the end to get errors from the server, you can create a custom hook and use it in all parts of the project that you need to request and show the answer as a modal.

fetch(url)
  .then(res=> console.log(res.data)) 
  .catch(error=> console.log(error.message))
user_170870500
Related