[英]How to make on redux store for two windows in Electron
我用 React 制作了两个不同的 windows 并提供相同的商店。 但是,如果我更改一个 window 中的存储数据,则第二个 window 不会更改。 并且 idk 知道如何同步。(所有 Reducers 和 Actions 都是在默认的 React 项目上制作的)
首先提供(index.js):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import store from "../redux/store";
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById("root"))
第一个 App.js:
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {addNumberAction} from "../redux/addNumber";
export default function App() {
const {number} = useSelector(state=>state.testPage)
const dispatch = useDispatch();
let changeNumber = number
return (
<>
<h1>First</h1>
<button onClick={()=>dispatch(addNumberAction(++changeNumber))}>{number}</button>
</>
)
}
第二个提供(index.js):
import React from 'react';
import ReactDOM from 'react-dom'
import App from "./App";
import {Provider} from "react-redux";
import store from "../redux/store";
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById("root2")
)
第二个 App.js:
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {addNumber, addNumberAction} from "../redux/addNumber";
export default function App() {
const {number} = useSelector(state=>state.testPage)
const dispatch = useDispatch();
let changeNumber = number
return (
<>
<h1>Second</h1>
<button onClick={()=>dispatch(addNumberAction(++changeNumber))}>{number}</button>
</>
)
}
他们不是同一家商店。 每次您使用<Provider store={store}>
时,它基本上都会为其中的任何组件创建一个商店。 调用两个<Provider store={store}>
将创建 2 个独立的存储。
我尝试配置 redux 状态以在浏览器的窗口之间共享状态。 最后,我找到了信息,如何使用钩子。 例如,
import React, { useState, useEffect } from "react";
function HelloStorage() {
const [name, setName] = useState("");
useEffect(() => {
localStorage.setItem("name", name);
}, [name]);
useEffect(() => {
const onReceiveMessage = (e) => {
const { key, newValue } = e;
if (key === "name") {
setName(newValue);
}
};
window.addEventListener("storage", onReceiveMessage);
return () => {
window.removeEventListener("storage", onReceiveMessage);
};
}, []);
const handleChange = (e) => {
setName(e.target.value);
};
return <input value={name} onChange={handleChange} />;
}
对于此链接,您可以找到有关如何创建自定义 React Hook 以在没有 Redux 状态的浏览器选项卡之间共享状态的信息。
您可以为此使用 redux-state-sync ( https://www.npmjs.com/package/redux-state-sync )。
比方说,您目前是这样创建商店的:
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
reducer
});
您所需要的只是将中间件添加到商店:
import { configureStore } from '@reduxjs/toolkit';
import { createStateSyncMiddleware, initMessageListener } from 'redux-state-sync'
export const store = configureStore({
reducer,
middleware: [createStateSyncMiddleware()],
});
initMessageListener(store);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.