Tengo un problema para acceder a la matriz de objetos de estado inicial para redux.
Tengo estos estados iniciales:
export const initialState = [ { blogPosts: [ { title: "", category: "", logo: "", author: "", date: "", timeToRead: "", blogImage: "", }, ], }, { filterStatus: "" }, { filterBy: "" }, ]; y solo quiero cambiar el filterStatus de mi reducer . Pero tratar de hacerlo es cambiar y también agregar un objeto más en la matriz.
Estaba probando este código de mi reductor:
case SEARCH_AUTHOR: return [ ...state, (state[1].filterStatus = "author"), ];¿Cómo puedo cambiar para deshacerme de este problema?
Lo que estás haciendo aquí:
case SEARCH_AUTHOR: return [ ...state, (state[1].filterStatus = "author"), ]; Está creando un nuevo objeto con la totalidad del state - ( ...state ) Y luego modifica el estado del filtro del segundo elemento, pero solo devuelve el resultado de la expresión que es el valor "author" recién establecido.
Hay muchas formas de implementar lo que quería, creo que la más simple sería copiar la matriz y luego modificar la copia antes de regresar.
case SEARCH_AUTHOR: const copy = [...state] copy[1] = {...copy[1], filterStatus: 'author'} return copy;Lo que esto hace es:
1 con un nuevo objeto que difunde (copia) el original y luego sobrescribe la clave requerida Otra posible solución sería usar map o reduce en la matriz y devolver la nueva matriz modificada, o splice un nuevo objeto en el índice correcto
Puede usar splice state.splice(1, 1, { filterStatus: "author" } para eliminar { filterStatus: "" } y establecer en su lugar { filterStatus: "author" } y devolver una copia del estado mediante return [...state] .
const initialState = [ { blogPosts: [ { title: "", category: "", logo: "", author: "", date: "", timeToRead: "", blogImage: "", }, ], }, { filterStatus: "" }, { filterBy: "" }, ]; const changeFilter = () => { initialState.splice(1, 1, { filterStatus: "author" } ) return [ ...initialState ]; } console.log(changeFilter())Usa var en lugar de const
export var initialState = [ { blogPosts: [ { title: "", category: "", logo: "", author: "", date: "", timeToRead: "", blogImage: "", }, ], }, { filterStatus: "" }, { filterBy: "" }, ];