Reactjs 在页面刷新后从redux状态保留用户id

我有一个简单的React应用程序，它显示一个聊天组列表，用户通过使用存储在redux状态中的用户id通过get请求创建聊天组。组件在初始呈现时确实正确地获取了组，但是当我刷新页面时，用户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);

const Groups=props=>{
const[groups，setGroups]=useState（[]）；
const{user_id}=props；
useffect（（）=>{
get（`/api/groups/${user\u id}`）
.然后（res=>setGroups（res.data））
.catch（错误=>{
log（`Error:${err.message}`）；
})
}，[user_id]）；
console.log（'groups'，groups）
返回(
{groups.map（group=>{group.name}
）}
)
}
常量MapStateTops=reduxState=>{
返回{
用户id:reduxState.userReducer.user.user\u id
}
}
导出默认连接（MapStateTops）（组）；

您应该使用

redux persist

实现页面刷新的持久性。您应该已经从

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 persist/integration/react'导入{PersistGate}
// ... 正常设置、创建存储和持久化、导入组件等。
常量应用=（）=>{
返回(
);
};

刷新后，您应该能够在redux开发工具中看到持久化的

用户id

，并在浏览器开发工具的

应用程序

选项卡中的本地存储中看到

---

您可以只将所需的减缩器列为白名单，而不必保存整个

存储区
。查看npm包页面了解更多详细信息=>
您应该使用
redux persist
实现页面刷新的持久性。您应该已经从
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 persist/integration/react'导入{PersistGate}
// ... 正常设置、创建存储和持久化、导入组件等。
常量应用=（）=>{
返回(
);
};

刷新后，您应该能够在redux开发工具中看到持久化的
用户id
，并在浏览器开发工具的
应用程序
选项卡中的本地存储中看到

您可以只将所需的减缩器列为白名单，而不必保存整个
存储区
。查看npm包页面了解更多详细信息=>
您需要使用白名单来保存redux存储中的值

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

查看以下链接：
您需要使用白名单来保存redux存储中的值

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

查看以下链接：
试试如果有人直接通过URL访问此页面会发生什么？您可以使用本地存储（这是redux persist在典型的web安装中在后台使用的），但您还需要处理在找不到
用户id
时将流量重定向到登录页面的问题。如果有人直接通过URL访问此页面，会发生什么情况？您可以使用本地存储（这是redux persist在典型web安装中在后台使用的存储），但您还需要处理在找不到
用户id
时将流量重定向到登录页面的问题。