React改写index.js全局监听redux状态修改时重新挂载元素

查看本文 首先 你需要明白redux的基本部署结构 最典型的就是 store的编写 如果不了解 可以查看我的文章
分解优化react对redux的基础使用

大家都知道 React和redux不像vue和vuex
vuex数据更改是响应式的 项目组件用到的都会重新渲染 但redux改变 React项目是没什么反应的

但其实是可以监听的

我们找到 src下的 index.js 在这里引入store
然后 root.render是界面挂载的代码
我们通过store subscribe监听redux状态改变 当触发时 重新执行 root.render把界面整个挂载一次即可

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from "./store/index";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
store.subscribe(() => {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
})

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();