React应用从window取Redux默认store时useSelector返回undefined如何解决

Redux reducer的默认参数state = window.store会在store.js模块被导入时立即求值，这个时间点远早于useEffect内异步读取本地存储逻辑的执行时间，此时window.store还未被赋值，所以reducer的初始state直接被设定为undefined。且reducer初始值一旦确定，后续window.store的更新也不会自动同步到Redux state中，你添加的sleep等待逻辑完全无效，因为赋值时机的优先级远低于模块导入的执行时机。

按照以下步骤调整即可解决问题：

• 移除所有给window.store全局变量赋值的逻辑，避免全局变量污染和赋值时机错位问题。
• 修改store.js，导出可接收初始状态的store创建方法，新增初始化状态的action：

// store.js
import { createStore } from 'redux'

const AppReducer = (state = {}, action) => {
    switch(action.type){
        case 'INIT_STORAGE_STATE':
            return {...state, ...action.payload}
        default :
            return state;
    }
}

// 支持传入预加载的本地存储状态
export const createAppStore = (preloadedState = {}) => {
    return createStore(AppReducer, preloadedState)
}

• 修改init.js，等本地存储读取完成后再创建Redux store，直接传入初始状态：

// init.js
import { createAppStore } from './store'
import { Provider } from 'react-redux'
import App from './App'

const InitializeApp = () => {
    let [appStore, setAppStore] = useState(null)
    useEffect(()=>{
        const initState = async() => {
            const storageState = await loadFromStorage()
            // 用本地存储的状态作为初始值创建store
            const store = createAppStore(storageState)
            setAppStore(store)
        }
        initState()
    },[])
    if(!appStore){
        return <InitTemplate />
    }
    return (
        <Provider store={appStore}>
            <App />
        </Provider>
    )
}

• 删除原有App.js中冗余的Provider嵌套逻辑，避免重复绑定store。

调整完成后，Redux的初始状态就是你从本地存储读取到的内容，useSelector就可以正常取到值了。

内容的提问来源于stack exchange，提问作者Alok Prakash