如何使用 Typescript 访问 React 组件外部的 Redux 存储

Question

我想使用我拥有的实用程序功能之一从我的商店中获取一些状态。我知道我可以做这样的事情：

import { store } from '../Store';
const func() {
    const state = store.getState()
}

现在，这让我可以访问整个商店，而且，当我尝试访问商店中的元素时，我不会像使用 useSelector 挂钩时那样获得自动完成功能。我想知道当我在组件外部访问商店时是否真的可以获得自动完成或仅访问特定内容。

也许是这样的：（我知道这行不通，但我只想知道是否有类似的事情我可以做）

store<SomeTypeInMyStore>.getState()

我的商店是这样构建的：

const persistConfig :any = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['login', 'biometrics']
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store: Store<any> = createStore(
  persistedReducer,
  applyMiddleware(thunk)
);

const persistor = persistStore(store);

export { store, persistor };

Answer 1

第一个问题是: Store<any>的使用。您的代码告诉 TS“这是一个通用商店实例，没有任何关于状态的详细信息”。不要那样做 :) 相反，您应该遵循 our recommended TS setup guidelines，通过从创建的实例推断商店的类型及其状态：

// app/store.ts

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

// and if you need the type of the store itself
export type AppStore = typeof store

此外，you should not import the store directly into other files，因为这可能会导致循环导入问题。

我们在这里的第一个建议是编写这些 util 函数，以便它们接受整个商店状态或只接受所需的值作为参数，这样它们就不必访问商店实例。如果做不到这一点，如果他们必须有权访问商店本身，那么我们建议 injecting the store at app setup time。

如何使用 Typescript 访问 React 组件外部的 Redux 存储

How to access Redux store outside React components with Typescript

typescript

reactjs

react-native

redux

react-redux