Este es mi primer proyecto de reacción y el primer proyecto de JS en general, por lo que soy increíblemente nuevo en el lenguaje, aunque tengo algo de experiencia previa con C#.
Obtuve mi aplicación en una versión que funcionaba localmente, pero mis estados y el paso de accesorios se estaban saliendo de control, así que quería implementar redux antes de que empeorara. Tengo una función getClients Axios que parece funcionar con un estado local, pero algo sobre la forma en que está configurado no funciona para redux. Configuré los registros de la consola y los depuradores y parece que el reductor está viendo la acción. La carga útil está bien y debería estar actualizando el estado. pero mi variable clientList con useSelector siempre muestra una matriz vacía.
export default function ClientDisplay() { // const [clients, setClients] = useState([]); const clientList = useSelector((state) => state.clientList); const dispatch = useDispatch(); useEffect(() => { getClients(); console.log("initial load"); }, []); const getClients = () => { Axios.get("http://localhost:3001/table/clients").then((response) => { console.log("getClients trigered") dispatch(setClientList(response.data)); }); }; import { createSlice } from "@reduxjs/toolkit" export const clientListSlice = createSlice({ name: 'ClientList', initialState: [], reducers: { setClientList(state, action) { state = action.payload; }, }, }); export const {setClientList} = clientListSlice.actions export default clientListSlice.reducer; const store = configureStore({ reducer : { activeClient: activeClientReducer, clientList: clientListReducer, }, }) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store={store}> <App /> </Provider> );Intente definir el estado inicial correctamente.
export const clientListSlice = createSlice({ name: 'clientList', initialState: {clients:[]}, reducers: { setClientList(state, action) { state.clients = action.payload; }, }, })y luego en useSelector
const {clients} = useSelector((state) => state.clientList);