需求
当项目语言切换时,对有些接口是需要进行重新请求的,request body
里面的lang
属性发生了变化,接口就会依照lang属性返回不同语言的结果。
解决方案
Redux
为我们提供了store.subscribe
订阅事件,能够让我们在数据发生变化时在它的回调函数里进行操作,然后再配合我们的useEffect
钩子即可实现该功能。
当项目语言进行切换时,在本地做了持久化的,也就是当前语言可以在
localStorage
取到
具体代码如下:
const [lang. setLang] = useState<string>(storage.getItem('language')) // 此处从本地拿到初始值,可以防止useEffect里的请求一开始执行两次!!
store.subscribe(() => {
setLang(store.getState().language)
})
useEffect(() =>{
getList()
}, [lang]) // 第二个依赖参数一定要填lang,这样表明当lang发生变化时,重新执行useEffect里的逻辑