Soy un poco nuevo en redux y reacciono y estoy un poco atascado. así que tengo esta aplicación web que agrega una nueva lista a la matriz redux state todos.

En mi estado de redux devtools, la nueva lista se agrega correctamente, pero el selector de uso en mi aplicación no se actualiza correctamente y parece que no puedo entender por qué.

Intenté buscarlo en línea y probé diferentes métodos, pero no funcionaron ;-; Lo siento si esta es una pregunta de nooby y ty por adelantado para cualquier ayuda <3

mi archivo App.js:

 import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { addTask } from './redux/toDoSlice'; import SideBar from './components/SideBar'; function App() { const lists = useSelector((state)=> state.todos); return ( <SideBar lists = {lists} /> ) export default App;

archivo toDoSlice.js:

 import {createSlice} from '@reduxjs/toolkit'; const toDoSlice = createSlice({ name: "todos", initialState: [], reducers: { addList: (state , action)=>{ state.push(action.payload.list); }, } }); export const { addList, } = toDoSlice.actions; export default toDoSlice.reducer;

mi archivo SideBar.js:

 import React, { useState } from "react"; import { useDispatch } from 'react-redux'; import { addList } from "../redux/toDoSlice"; export default function SideBar(props){ const lists = props.lists; const dispatch = useDispatch(); const addNewListEvent = (e)=>{ e.preventDefault(); var date_time = new Date().toLocaleString(); var title = 'my list '+date_time; var list = { _id:date_time, title:title, items:[] }; dispatch(addList({list: list})); } return( <button onClick={addNewListEvent}>New</button> ) }

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import './index.css'; import App from './App'; import store from './redux/store'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') );