Question

我有一个简单的 React 应用程序，它显示用户使用存储在 redux 状态的 user_id 通过 get 请求创建的聊天组列表。该组件确实在初始渲染时正确获取了组，但是当我刷新页面时，user_id 未定义，导致未获取数据。我已经研究过坚持使用本地存储，但我认为有更好的选择吗？我是新手，只是想找出最佳选择。

const Groups = props => {
const [groups, setGroups] = useState([]);
    const { user_id } = props;

    useEffect(() => {
        axios.get(`/api/groups/${user_id}`)
            .then(res => setGroups(res.data))
            .catch(err => {
                console.log(`Error: ${err.message}`);
            })
    }, [user_id]);


    console.log('groups', groups)
    return (
        <section>
            <Heading2 text='Groups' />
        {groups.map(group=><p>{group.name}</p>)}
        </section>
    )
}

const mapStateToProps = reduxState => {
    return {
        user_id: reduxState.userReducer.user.user_id
    }
}

export default connect(mapStateToProps)(Groups);

Answer 1

您应该使用 redux-persist 来实现页面刷新的持久性。您应该已经从 store 配置了 redux。只需按照下面给出的示例进行操作即可。

如下更改您的 createStore 函数

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web


import rootReducer from './reducers'
 
const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

并更改您的根组件，如下所示

import { PersistGate } from 'redux-persist/integration/react'
 
// ... normal setup, create store and persistor, import components etc.
 
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

刷新后，您应该能够在 redux 开发工具和本地存储中的浏览器开发工具的 user_id 选项卡中看到持久化的 Application。

您可以只将您想要的减速器列入白名单，而不是保留整个 store。查看 npm 包页面了解更多详情 => https://www.npmjs.com/package/redux-persist

Answer 2

您需要使用白名单来持久化 redux 存储中的值。

const persistConfig = {
    key: "root",
    storage: storage,
    whitelist: ['user']
};

查看以下链接： https://www.npmjs.com/package/redux-persist

页面刷新后从 redux 状态保留用户 ID

2 个答案: