在页面刷新后，将用户id从redux状态持久化

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来实现针对页面刷新的持久性。您应该已经从redux配置了store。只需按照下面给出的示例操作即可。

更改您的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开发工具中以及在浏览器开发工具的Application选项卡中的本地存储中看到持久化的user_id。

你可以只将你想要的减速器列入白名单，而不是持久化整个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