[英]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.