在 React 函数组件中使用 useSelector

Question

我在 baseReducer.ts 中声明了一个状态：

import {PayloadAction} from '~common/declarations/action';

const initialState = {
  test: 'baseReducer'
};

const BaseReducer = (state = initialState, action: PayloadAction<any>): any => {
  switch(action.type) {
    default:
      return state;
  }
}

export default BaseReducer;

然后在我的 orderReducer 中：

import {PayloadAction} from '~common/declarations/action';

const initialState = {
  test: 'orderReducer'
};

const OrderReducer = (state = initialState, action: PayloadAction<any>): any => {
  switch(action.type) {
    default:
      return state;
  }
}

export default OrderReducer ;

在我的 rootReducer 中：

const RootReducer: Reducer = combineReducers({
  BaseReducer,
  OrderReducer
});

export default RootReducer;

现在在我的功能组件中OrderPage.tsx：

export default function OrderPage() {
  const stringText: string = useSelector(state => state.test)  // HERE
  return (
    <React.Fragment>Order Page</React.Fragment>
  );
}

这是我的问题：

如何定义从哪个状态获取？理想情况下，我想从OrderReducer 指定状态。

使用 react 类时，我可以执行以下操作：

const mapStateToProps = ({orderReducer}) => {
  return {
    test: orderReducer.test
  }
}

编辑：

我尝试了以下（当然是单独的！），但没有奏效：

const reducer: string = useSelector(state => state.baseReducer);
const reducer: string = useSelector(state => state.orderReducer);

如何在功能组件中实现同样的功能？

Answer 1

您需要在useSelector中使用正确的选择器功能：

const stringText = useSelector(state => state.OrderReducer.test)

或者，如果你这样写（不使用property name shorthand）：

const RootReducer: Reducer = combineReducers({
  base: BaseReducer,
  order: OrderReducer
});

然后

const stringText = useSelector(state => state.order.test)

---

你可以通过定义RootState类型来进一步避免这个错误：

export type RootState = ReturnType<typeof store.getState>
// ...
const stringText = useSelector((state: RootState) => state.OrderReducer.test)

编辑：

如果遇到错误：

OrderReducer 在 DefaultRootState 上不存在。

那么你应该定义RootState 类型，因为DefaultRootState 只是 export interface DefaultRootState {}.