我繼承了一個包含 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 模塊中使用它。你能告訴我我是怎么做到的嗎？
我無法提供對源代碼的完全訪問權限，因為我不擁有它。但我可以添加需要的資訊。
uj5u.com熱心網友回復：
我會假設您正在使用類組件，所以我將提供的解決方案就是為此。
第一步是匯入 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);
就是這樣。
uj5u.com熱心網友回復：
您是否嘗試過useDispatch在useSelectorts 檔案中獲取 redux 狀態
import {
useSelector as useReduxSelector,
TypedUseSelectorHook,
} from 'react-redux'
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442546.html