1111

redux/toolkit_persist/src/store/index.js

@@ -1,12 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit'
-import todosReducer from './modules/todosReducer'
-import visibilityFilterReducer from './modules/visibilityFilterReducer'
- 
-const store = configureStore({
-  reducer: {
-    todos: todosReducer,
-    filter: visibilityFilterReducer
-  }
-})
- 
-export default store

redux/toolkit_persist1/src/components/page1.jsx

@@ -4,7 +4,7 @@ function Hehe(){
     const test1=()=>{
         dispatch(addTodo('love'))
     }
-    const {todos}=useSelector(state=>state.todos)
+    const {todos}=useSelector(state=>state.todosReducer)
     const dispatch=useDispatch()
     return (
         <div className='page1'>

redux/toolkit_persist1/src/components/page2.jsx

@@ -4,7 +4,7 @@ function Hehe(){
     const test1=()=>{
         dispatch(setFilter('love'))
     }
-    const {filter}=useSelector(state=>state.filter)
+    const {filter}=useSelector(state=>state.visibilityFilterReducer)
     const dispatch=useDispatch()
     return (
         <div className='page2'>

redux/toolkit_persist1/src/index.js

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { Provider } from 'react-redux';
-import store from './store/index'
+import {store,persistor} from './store/index'
+import {PersistGate} from 'redux-persist/integration/react'
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}></PersistGate>
       <App />
     </Provider>
   </React.StrictMode>

redux/toolkit_persist1/src/store/index.js

@@ -0,0 +1,26 @@
+
+import todosReducer from './modules/todosReducer'
+import visibilityFilterReducer from './modules/visibilityFilterReducer'
+import { combineReducers,configureStore} from '@reduxjs/toolkit'
+import {persistReducer,persistStore} from 'redux-persist'
+import storage from 'redux-persist/lib/storage'; 
+ 
+const rootReducer = combineReducers({
+  todosReducer,visibilityFilterReducer
+})
+const persistConfig = {
+  key:'root',
+  storage
+}
+const persistedReducer=persistReducer(persistConfig,rootReducer)
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+	   serializableCheck: false,
+  })
+});
+const persistor = persistStore(store);
+export {
+  store,
+  persistor
+}

redux/toolkit_persist1/src/store/modules/todosReducer.js

@@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit"
  
 let nextTodoId = 0
 const todosReducer = createSlice({
-  name: 'todo',
+  name: 'hehe',
   // 初始状态
   initialState: {
     todos:[{