Estoy viendo este comportamiento en el que si copio un estado redux a una variable local y realizo un cambio en esa variable, también actualiza mi tienda redux sin que yo use ningún tipo de despacho, aquí está mi código:
// here is my action type inside my reducer case SET_USERS: return { ...state, users: action.payload, }; // and here i have a helper function to select a specific state and pass it to useSelector later on export const getUsersSelector = (state: RootState) => { return state.app.users; }; y estoy accediendo a mi estado de esta manera dentro de un gancho personalizado useUsers que tengo
export const useUsers = () => { const users = useSelector(getUsersSelector); return {users} } y estoy accediendo al valor de mis users en otro componente usando el useUsers :
const ListUsers = () => { const {users} = useUsers() //i make a copy of my users state const copyOfUsers = users //and update the copied variable copyOfUsers.push({name: 'John'}) retunr (<View>{copyOfUsers.map((user)=><Text>{user.name}</Text>)}</View>) } el problema que tengo es enviar un nuevo elemento a mi variable copyOfUsers también actualiza el estado de los users dentro de la tienda redux, no sé por qué sucede esto y si es un comportamiento normal, solo quería saber si esto es un error o un comportamiento intencional de redux? o como puedo evitarlo?
En realidad, está alterando shallow copy de la instancia de los users .
Primero debe crear una deep copy de la instancia de los users y luego operar en los datos.
Los usuarios son una Array , por lo que podría haber usado el slice para crear una copia profunda y luego debería haber insertado el nuevo objeto en la nueva copia de los usuarios. Eso habría evitado el reflejo de la mutación en su copia redux.
Tu código debería verse así:
const {users} = useUsers() const copyOfUsers = users.slice() // this is actually created a deep copy of your array. copyOfUsers.push({name: 'John'}) // changing the new memory data hence will not reflect in redux state.