Kevin Powell - Community•2y ago

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

4 Replies

Dev_MarutiOP•2y ago

Please help me out , I am tired of trying different methods from last 2 days , I am using old version of redux in reactjs ( "react-redux": "^7.2.6" , "redux": "^4.1.2" )

Unknown User•2y ago

Message Not Public

Dev_MarutiOP•2y ago

@acemouty Thanks buddy for stepping in . 🙏 This is my repo link it's just a very small test project , In this I am trying to increment and decrement the value by 1 in test1 file and see the result in input tag which takes the value from redux , please ignore test2 file its of no use ( I forgot to delete it ) , The branch is : Redux-Basics https://github.com/agroot2002/React-State-Management/tree/Redux-Basics I will be very happy if you have a look and help me out ... Thank You 😊

GitHub

GitHub - agroot2002/React-State-Management at Redux-Basics

In this repo you will get various methods of sharing value among the different components in reactjs ..... - GitHub - agroot2002/React-State-Management at Redux-Basics

Dev_MarutiOP•2y ago

And I am not using Redux Toolkit I am using the before version of Redux for tutorial and practice purpose 👍

Gaming

Programming

useSelector() in Redux not rendering new value ❓