我如何将redux与localStorage连接，以便在更新页面上的类似内容时不会消失

Question

如何将redux与localStorage连接，以便在更新页面上的类似内容时不会消失

我有redux.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import favouriteReducer from "./reducers/favouriteReducer";
const redusers = combineReducers({
favourite: favouriteReducer,
});
const store = createStore(redusers, composeWithDevTools(applyMiddleware(thunk)));
export default store;

reducer.js

const initialState = {
items: []
}
function favouriteReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_MOVIE':
return {
items: state.items.concat(action.payload)
}
case 'REMOVE_MOVIE':
return {
items: state.items.filter(item => item !== action.payload)
}
default:
return state;
}
}
export default favouriteReducer;

action.js

export function addMovie(id) {
return {
type: 'ADD_MOVIE',
payload: id
}
}
export function removeMovie(id) {
return {
type: 'REMOVE_MOVIE',
payload: id
}
}

和组件，我添加到redux我的电影点击svg

import React from "react";
import './index.css';
import { Link} from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { addMovie, removeMovie } from "../../../../redux/actions/favouriteMovie";
const Movie = (props) => {
const dispatch = useDispatch();
const active = useSelector((store) => store.favourite.items.find(item => item === props.id));
let onClick = (e) => {
e.preventDefault();
dispatch(addMovie(props.id))
localStorage.setItem('active', active)

if (active) {
dispatch(removeMovie(props.id))
}
}

return (
<Link to= {"/modal/:"+`${props.id}`} id={props.id} className={'movie'}>
<img src={"https://image.tmdb.org/t/p/w500/"+props.poster_path} alt={props.title} className={'main'}/>
<h1 className={'title'}>{props.title}</h1>
<div>
<svg className={active ? 'activeimg' : 'heart'}  onClick={onClick} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
<p className={'text'}>{props.release_date}</p>
</div>
</Link>
);
};
export default Movie;

我不明白如何将这个redux与localStorage连接起来。更新时如何从redux中的localStorage获取项目。现在我在点击和红色svg时得到了未定义，然后再点击一次，我在localStorage和白色svg中收到了这部电影的id，但需要红色。

提前谢谢。

Answer 1

redux.js

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import favouriteReducer from "./reducers/favouriteReducer";
const redusers = combineReducers({
favourite: favouriteReducer,
});
function saveToLocalStorage(state) {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
} catch (err) {
console.log('error occured ', err)
}
}
function loadFromLocalStorage() {
try {
const serializedState = localStorage.getItem('state');
if (serializedState === null) return undefined;
return JSON.parse(serializedState);
} catch (err) {
console.log('error occured ', err)
}
}
const persistedState = loadFromLocalStorage();
const store = createStore(redusers, persistedState, composeWithDevTools(applyMiddleware(thunk)));
store.subscribe(() => saveToLocalStorage(store.getState()))
export default store;