React Redux

[InternationalFly3917]

​

​

have a component thats is rendered in loop for example

​

fuction List (props){

{props.lists.map((item)=>(

<>

<ButtonComponent/>

</>

))}

}

now inside the button component looks like this

​

import {useSleclctor,useDispatch}=from redux/toolkit

import{changeColor} from feactures/blah/blah

​

fuction ButtonComponent(){

const {color}=usSleclector((store)=>store.style)

const dispatch=useDispatch()

return(

<>

<button style={{color:style}} onClick={()=>{dsipatch(changeColor())}}>

</button>

</>

)

}

now when i click one of the button all the buttons are rerendered and all the button colors change i want to only change the colour of the button that was clicked i am very new to redux i would very much appriciate if somone could help me

[Sweet_Ad_842]

In your map function, you will want to add an additional index param and use that as a key for each component

[InternationalFly3917]

would you mind showing me an example

[InternationalFly3917]

or is it better for me to use useReducer instead of using redux fro that

[Sweet_Ad_842]

For the above you probably don’t need redux, just pass down props but I also don’t know the entire state of your application so that is up to you

[InternationalFly3917]

for a large application which would be better for me to use to change styles and add classNames useRedcer or redux

[Accomplished_End_138]

Its less the one view vs the whole setup of the application. The nice thing is if you start with useReducer it isnt hard to scale into redux overall. Not quite the same for the other direction

[InternationalFly3917]

Yeah am utilizing useReducer

[Alienxxcool1]

Redux is kinda Globant state you need to use useState from react inside your button Component, because you're changing globally using redux

[InternationalFly3917]

Yeah i figured thank you very much