soy nuevo y estoy tratando de aprender a reaccionar y redux, estaba tratando de hacer esta simple lista de usuarios / lista de tareas pendientes, puedo agregar elementos de la lista pero no puedo eliminarlos con eliminar en el reductor, si hago clic en el botón elimina toda la matriz y el registro de carga útil vuelve indefinido, ¿alguien puede ayudarme? ¡gracias por toda la ayuda!
TIENDA
import { combineReducers } from "@reduxjs/toolkit"; import { userState } from "./UsersState"; import { createStore } from "redux"; import { composeWithDevTools } from "redux-devtools-extension"; const rootReducer = combineReducers({ users: userState.reducer, }); export const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );REDUCTOR
import { createSlice, current } from "@reduxjs/toolkit"; export const userState = createSlice({ name: "users", initialState: [], reducers: { add: (state, action) => [...state, action.payload], remove: (state, action) => state.filter((user, index) => user.id !== action.payload), clear: (state, action) => [], log: (state, action) => console.log(state), }, });PRESTAR
import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { store } from "./Store"; import { add, remove, clear, userState } from "./UsersState"; export function UsersList() { const users = useSelector((state) => state.users); const dispatch = useDispatch(); function addUser(event) { event.preventDefault(); dispatch(userState.actions.add(event.target.elements.username.value)); dispatch(userState.actions.log()); } function removeUser() { dispatch(userState.actions.remove()); } function clearList() { dispatch(userState.actions.clear()); console.log(store.getState()); } function logState() { dispatch(userState.actions.log()); } return ( <div> <ul className="ul"> {users.map((user, index) => ( <div className="list-element" key={index + 1}> <li key={index}>{user}</li> <button onClick={removeUser} type="submit"> remove </button> </div> ))} </ul> <form onSubmit={addUser}> <input name="username" type="text" /> Insert name <button type="submit">Add user</button> </form> <button onClick={clearList}>Clear list</button> <button onClick={logState}>Log state</button> </div> ); }En primer lugar, actualice el componente como sigue (comenté sobre el lugar del cambio)
import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { store } from "./Store"; import { add, remove, clear, userState } from "./UsersState"; // make sure to export these actions from the reducer file export function UsersList() { const users = useSelector((state) => state.users); const dispatch = useDispatch(); function addUser(event) { event.preventDefault(); dispatch(userState.actions.add(event.target.elements.username.value)); dispatch(userState.actions.log()); } function removeUser() { dispatch(userState.actions.remove()); } function clearList() { dispatch(userState.actions.clear()); console.log(store.getState()); } function logState() { dispatch(userState.actions.log()); } return ( <div> <ul className="ul"> {users.map((user, index) => ( <div className="list-element" key={index + 1}> <li key={index}>{user}</li> {/* you can directly dispatch the remove function*/} {/* no need this button to be type="button"*/} {/* change here */} <button onClick={() => dispatch(remove(user))}> remove </button> </div> ))} </ul> <form onSubmit={addUser}> <input name="username" type="text" /> Insert name <button>Add user</button> </form> <button onClick={clearList}>Clear list</button> <button onClick={logState}>Log state</button> </div> ); }Necesitabas pasar al usuario en la acción y enviarlo, ¡espero que ayude!
Para el archivo reductor, también debe exportar las acciones.
import { createSlice, current } from "@reduxjs/toolkit"; export const userState = createSlice({ name: "users", initialState: [], reducers: { add: (state, action) => [...state, action.payload], remove: (state, action) => // need to redefine the state, forgot this part // change here state = state.filter((user, index) => user !== action.payload), clear: (state, action) => [], log: (state, action) => console.log(state), }, }); export const {add, remove, clear, log} = userState.actions; export default userState.reducer;