rootReducer.ts

import users from './users';

const rootReducer = {
  users
};

export const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware({
    thunk: true,
  }),
});

export type AppState = ReturnType<typeof store.getState>;

  

users.ts

import { combineReducers, createAsyncThunk, createEntityAdapter, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

type User = {
  uid: string;
  displayName: string;
  email: string;
};

const userAdapter = createEntityAdapter<User>();

const loadUser = createAsyncThunk('users/load', async (params: { nextToken: string }) => {
  return (await axios.get('/api/users', {
    params: {
      nextToken: params.nextToken,
    },
  })) as { items: User[] };
});

const userSlice = createSlice({
  name: 'users',
  initialState: userAdapter.getInitialState(),
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(loadUser.fulfilled, (state, { payload }) => {
      userAdapter.setAll(state, payload.items);
    });
  },
});

type UserListPageState = {
  loading: boolean;
};

const userListPage = createSlice({
  name: 'userListPage',
  initialState: {} as UserListPageState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(loadUser.pending, (state) => {state.loading = true});
    builder.addCase(loadUser.fulfilled, (state) => {state.loading = false});
    builder.addCase(loadUser.rejected, (state) => {state.loading = false});
  },
});

export default combineReducers({
  users: userSlice.reducer,
  userListPage: userListPage.reducer
})
  
export const userSelectors = userAdapter.getSelectors((s: AppState) => s.users.userList)

Users.tsx

import { userSelectors } from './users'
import { AppState } from './rootReducer'

const Users: React.FC = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(loadUser({}));
  }, [dispatch]);

  return <UserList />;
};

const UserList: React.FC = () => {
  const users = useSelector(userSelectors.selectAll);

  return (
    <>
      {users.map((t) => (
        <span>{t.displayName}</span>
      ))}
    </>
  );
};

export default Users;