Using useSelector in React Function Component

Question

I declared a state in 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;

Then in my 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 ;

In my rootReducer:

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

export default RootReducer;

Now in my functional component OrderPage.tsx:

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

Here is my question:

How do I define which state to take from? Ideally I want to specify the state from OrderReducer.

When using react Classes, I could do the following:

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

Edit:

I tried the following (separately of course!), but it did not work:

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

How do I achieve the same in function components?

Function component - not functional component. Nothing functional about functions with state :) — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 14, 2021 at 10:07
I do not think baseReducer exists try const reducer: string = useSelector(state => state.OrderReducer); this is in accordance to how you did combine reducers const RootReducer: Reducer = combineReducers({ BaseReducer, OrderReducer }); — Craques
– Craques, Commented Apr 14, 2021 at 10:09

Ajeet Shah · Accepted Answer · 2021-04-14 10:24:02Z

3

You need to use correct selector function in useSelector:

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

Or, if you write like (without using property name shorthand):

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

Then

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

You can further avoid this error by defining RootState type:

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

Edit:

If you are getting error:

OrderReducer does not exist on DefaultRootState.

Then you should define RootState type because DefaultRootState is just export interface DefaultRootState {}.

edited Apr 14, 2021 at 10:24

answered Apr 14, 2021 at 10:10

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AKJ Over a year ago

I attempted the first solution, but intellij is claiming that OrderReducer does not exist on DefaultRootState. Is that different from the RootState?

AKJ Over a year ago

where should i export the type RootState?

AKJ Over a year ago

Did you mean state object? Store object was created using default method from redux in my App.tsx file

Collectives™ on Stack Overflow

Using useSelector in React Function Component

1 Answer 1

Edit:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related