Блог

Я создал два разных окна с 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"))
  

Первый 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}> его, в основном создавайте хранилище для любых компонентов внутри него. Вызов two <Provider store={store}> создаст 2 независимых хранилища.

Я попытался настроить состояние redux для совместного использования состояния между окнами браузера. В конце я нашел информацию, как это может быть с помощью hook. Например,

  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 для совместного использования состояния между вкладками браузера без состояния 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);