如何在redux上存储两个窗口的电子

wgmfuz8q 于 2022-11-12 发布在其他

关注(0)|答案(3)|浏览(172)

我已经做了两个不同的窗口与React和提供相同的存储。但如果我改变存储数据在一个窗口，第二个窗口不会改变。和idk知道如何同步。（所有的减少器和行动作为默认的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"))

第一个应用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")
)

第二个应用程序：

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>
        </>
    )
}

redux

来源：https://stackoverflow.com/questions/64608127/how-to-make-on-redux-store-for-two-windows-in-electron

3条答案

按热度按时间

ki1q1bka1#

它们不是同一个存储。每次使用<Provider store={store}>时，它基本上为其中的任何组件创建一个存储。调用两个<Provider store={store}>将创建两个独立的存储。

赞(0）回复(0）举报 2022-11-12

but5z9lq2#

我试着配置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} />;
    }

对于这个link，你可以找到信息，如何创建一个自定义的React挂钩，以共享浏览器选项卡之间的状态没有Redux状态。

赞(0）回复(0）举报 2022-11-12

pw9qyyiw3#

您可以使用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);

赞(0）回复(0）举报 2022-11-12

我来回答

如何在redux上存储两个窗口的电子

3条答案

相关问题

热门标签

最新问答