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_Maruti
Dev_Maruti2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Dev_Maruti
Dev_Maruti2y 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_Maruti
Dev_Maruti2y ago
And I am not using Redux Toolkit I am using the before version of Redux for tutorial and practice purpose 👍
Want results from more Discord servers?
Add your server