Estoy aprendiendo redux, y tengo un método addPosts para agregar publicaciones a la lista de publicaciones, y lo estoy haciendo así.
import { createSlice } from "@reduxjs/toolkit"; var initialState = [{ number: 1 }, { number: 2 }, { number: 3 }, { number: 4 }]; export const postsSlice = createSlice({ name: "postsSlice", initialState, reducers: { addPost: (state, action) => { state = [...state, action.payload]; }, }, }); export const allPosts = (state) => state.posts; export const { addPost } = postsSlice.actions; export default postsSlice.reducer;y usando el estado de esta manera.
import { useSelector, useDispatch } from "react-redux"; import { addPost, allPosts } from "./postsSlice"; function Posts() { var posts = useSelector(allPosts); var dispatch = useDispatch(); return ( <div> {posts.map((post) => ( <div>{post.number}</div> ))} {/* add post */} <button onClick={() => { dispatch(addPost({ number: 1 })); console.log(posts); }} > addpost </button> </div> ); } export default Posts; usar state.push(action.payload) funciona de alguna manera, aunque la documentación dice que no use el estado de actualización como este, y actualice de manera inmutable. como este state = [...state, action.payload] . no actualiza el estado de esta manera inmutable.
No se que es lo que estoy haciendo mal. Gracias de antemano por cualquier ayuda
Parece que está leyendo mal la documentación incorrecta para la herramienta incorrecta: en un reductor createSlice de Redux Toolkit, siempre es 100% correcto usar algo como state.push para modificar mutablemente el objeto en la variable de state .
Sin embargo, lo que no puede hacer es lo que está intentando aquí: reasignar la variable de state . Eso nunca tuvo ningún efecto en ningún tipo de reductor de Redux, a menos que devuelva esa variable de state más adelante.
Si desea hacer eso, deberá return [...state, action.payload] en su lugar y dejar la variable de state sola por completo; no debe reasignarse.
Pero la forma recomendada sería ese empujón.
Para obtener más información, lea Reductores de escritura con Immer
Según esto , en lugar de cambiar directamente al state , puede regresar de esta manera
return [...state, action.payload]
Dependiendo de su definición de initialState
Eche un vistazo al ejemplo funcional de react-redux-toolkit-slice-example
A continuación se muestra la definición de corte
import { createSlice } from "@reduxjs/toolkit"; const initialState = [{ number: 1 }]; export const postsSlice = createSlice({ name: "postsSlice", initialState, reducers: { addPost: (state, action) => { return [...state, action.payload]; } } }); export const allPosts = (state) => state.posts || []; export const { addPost } = postsSlice.actions; export default postsSlice.reducer;Definición del reductor (postSlice) en la tienda
import { configureStore } from "@reduxjs/toolkit"; import postsReducer from "../features/posts/postsSlice"; export default configureStore({ reducer: { posts: postsReducer } });Uso de rebanada en componente
import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { addPost, allPosts } from "./postsSlice"; const Posts = () => { var posts = useSelector(allPosts); var dispatch = useDispatch(); return ( <div> {posts.map((post, key) => ( <div key={key}>{post.number}</div> ))} {/* add post */} <button onClick={() => { dispatch( addPost({ number: Math.max(...posts.map(({ number }) => number)) + 1 }) ); console.log(posts); }} > Add Post </button> </div> ); }; export default Posts;