时间戳

首页 > 解决方案 > 使用反应从另一个组件中的一个组件获取更新的值

reactjs - 使用反应从另一个组件中的一个组件获取更新的值

问题描述

我有一个带有简单计数器的应用程序。计数器工作正常，但我无法在About组件中获取计数值，可以在 url 中添加该值/about。要从counterAbout.js 组件中的 store 中获取值，我做了：

const selector = useSelector(state => state);
  return <p>about page NR: {selector.counter}</p>...

当我单击主组件中的计数器时，如何实时访问关于组件中的计数值？
现在我刚刚在codesanbox中重现了我的问题，在我的应用程序中，我在浏览器中打开了两个页面。当我增加主组件中的值时，将选项卡切换到 About 组件，我只看到初始 vaue 0。那么，可能是什么问题？以及如何解决？
预期场景：当我单击主组件中的计数器以查看关于组件中的更新值时，两个页面都打开了。
演示：https ://codesandbox.io/s/competent-hawking-wu1df?file=/src/App.js:174-222

标签： reactjs

解决方案

您使用 url 更改 Route 的问题是，当您这样做时，页面会刷新，导致数据被清除。

如果您使用Linkfrom 'react-router 使用页面导航，则此代码将按预期工作。

为了在页面刷新时保留 reducer 更改，您可以将其存储在 localStorage 中并在加载时再次检索它。

此类库可redux-persist帮助您处理此类案件

使用 redux-persist，你的代码看起来像

import { PersistGate } from "redux-persist/integration/react";

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router>
        <Switch>
          <Route exact path="/">
            <App />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </Router>
    </PersistGate>
  </Provider>,
  rootElement
);

store.js

import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import { reducer } from "./reducer";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage
};

const persistedReducer = persistReducer(persistConfig, reducer);
let store = createStore(persistedReducer);
let persistor = persistStore(store);
export { store, persistor };

工作演示

推荐阅读