在 javascript 模块中定义商店并在打字稿模块中使用的应用程序中使用 redux

Question

我继承了一个应用程序，它有 JavaScript 个模块和 TypeScript 模块，并且正在使用 redux。
不幸的是，我从未使用过 TypeScript :(

状态在 .js 模块中定义。
所有使用状态的模块也是 .js 模块。
现在我需要访问 .ts 模块中的状态。

我该怎么做？

这是我的状态在文件中的定义 uiReducer.js:

export default function uiReducer(state = new UiState, action) {
  switch(action.type) {
...

并且在多个 .js 模块中使用，如下例所示：

const mapStateToProps = state => {
  return {
    a: state.get('ui').get('a'),
    b: state.get('ui').get('b')
  }
}

const mapDispatchToProps = dispatch => {
  return {
...
  }
}

export var About =
  connect(mapStateToProps, mapDispatchToProps)(About_Class);

正如我上面写的，我想在 .ts 模块中使用它。你能告诉我怎么做吗？

我无法提供对源代码的完整访问权限，因为我不拥有它。但我可以添加需要的信息。

Answer 1

你试过在ts文件中useDispatch和useSelector获取redux状态

import {
useSelector as useReduxSelector,
TypedUseSelectorHook,
} from 'react-redux'


export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector

Answer 2

我假设您使用的是 class 组件，因此我提供的解决方案就是针对此。

第一步是导入 ConnectedProps：

import { connect, ConnectedProps } from 'react-redux'

下一步是定义您的 state/reducer 的对象，因此在我们可以命名为 TsConnector.ts 的文件中，添加如下内容：

interface UIState {
    a: string,
    b: string,
    ...your other props
}

interface State {
    UI: UI,
    ...your other props
}

然后创建您的 mapState 和 mapDispatch 函数：

const mapState = (state: UIState ) => ({
   UI: state.UI,
   ...your other props
})

const mapDispatch = {
   ... your dispatch action
}

并导出：

export default tsconnector = connect(mapState, mapDispatch)

然后像往常一样使用 HOC 组件：

import { tsconnector } from '../components/TsConnector'

export var About =
  tsconnector(mapStateToProps, mapDispatchToProps)(About_Class);

就是这样。

在 javascript 模块中定义商店并在打字稿模块中使用的应用程序中使用 redux

Using redux in an app with store defined in a javascript module and used in a typescript module

typescript

react-redux