时间戳

首页 > 解决方案 > 如何在Electron中为两个窗口制作redux store

javascript - 如何在Electron中为两个窗口制作redux store

问题描述

我用反应制作了两个不同的窗口并提供相同的商店。但是，如果我在一个窗口中更改存储数据，则第二个窗口不会更改。并且 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>
        </>
    )
}

标签： javascriptreactjsreduxreact-reduxelectron

解决方案

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

推荐阅读