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 {}。

在 React 函数组件中使用 useSelector

1 个答案:

编辑：