Dev_Maruti Posts - Answer Overflow

Dev_Maruti

•Created by Dev_Maruti on 12/24/2022 in #front-end

useSelector() in Redux not rendering new value ❓

I am learning redux , so made a demo webApp and in that I am incrementing and decrementing the value by 1 on button click . The problem is useSelector() hook in redux get fired once when the component is mounted but after that it doesn't re-render the changed value .. Here is the code :-> Reducer :

import { Action_Types } from "./value.types"


const Initial_State = {
    Test_Value: 0
}

export const Value_Reducer = (state = Initial_State, action) => {
    const { type, payload } = action

    switch (type) {
        case Action_Types.Set_Test_Value:
            return {
                ...state,
                Test_Value: payload
            }
        default:
            return state
    }
}

import { Action_Types } from "./value.types"


const Initial_State = {
    Test_Value: 0
}

export const Value_Reducer = (state = Initial_State, action) => {
    const { type, payload } = action

    switch (type) {
        case Action_Types.Set_Test_Value:
            return {
                ...state,
                Test_Value: payload
            }
        default:
            return state
    }
}

and the main File :

import React, { useEffect } from 'react'
import { Set_Test_Value } from './store/value/value.actions'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'

function Test1() {

  const dispatch = useDispatch()

  const Test_Value = useSelector((state)=>state.value.Test_Value)
  
  
  const Increment = ()=>{
    console.log(Test_Value)
    dispatch(Set_Test_Value(Test_Value+1))
  }

  const Decrement = ()=>{
    if (Test_Value > 0) {
      dispatch(Set_Test_Value(Test_Value-1))
    }
  }

  useEffect(()=>console.log(Test_Value),[Test_Value])

  return (
    <>
      <h1>test1</h1>
      <input type="number" value={Test_Value} readOnly={true}/>
      <button onClick={Increment}>Increment</button>
      <button onClick={Decrement}>Decrement</button>
    </>
  )
}

export default Test1

import React, { useEffect } from 'react'
import { Set_Test_Value } from './store/value/value.actions'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'

function Test1() {

  const dispatch = useDispatch()

  const Test_Value = useSelector((state)=>state.value.Test_Value)
  
  
  const Increment = ()=>{
    console.log(Test_Value)
    dispatch(Set_Test_Value(Test_Value+1))
  }

  const Decrement = ()=>{
    if (Test_Value > 0) {
      dispatch(Set_Test_Value(Test_Value-1))
    }
  }

  useEffect(()=>console.log(Test_Value),[Test_Value])

  return (
    <>
      <h1>test1</h1>
      <input type="number" value={Test_Value} readOnly={true}/>
      <button onClick={Increment}>Increment</button>
      <button onClick={Decrement}>Decrement</button>
    </>
  )
}

export default Test1

11 replies

KPCKevin Powell - Community

•Created by Dev_Maruti on 11/27/2022 in #front-end

Tailwind CSS with Javascript

Hey Guys how can I use Tailwind css in js like : TeastRef.current.style.color = text-white Or something similar ❓

7 replies

Gaming

Programming