reduxjs-toolkit-example.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { UserProfileApi, UserSettingsApi } from '@selfplat/api-model';
import { AppThunk } from '../root.store';
import { ProfileService } from './profile.service';

export interface UserState {
  profile: UserProfileApi;
  settings: UserSettingsApi;
}

const initialState: UserState = {
  profile: null,
  settings: {
    themeColor: 'teal',
  },
};

const auth0Slice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setProfile(state, action: PayloadAction<UserProfileApi>) {
      const { payload: profile } = action;
      state.profile = profile;
    },
    setSettings(state, action: PayloadAction<UserSettingsApi>) {
      const { payload: settings } = action;
      state.settings = settings;
    },
  },
});

export const { setProfile, setSettings } = auth0Slice.actions;
export const { reducer: userReducer, name: userName } = auth0Slice;

export const fetchProfile = (): AppThunk => async dispatch => {
  try {
    const profile = await ProfileService.getProfile();
    dispatch(setProfile(profile));
  } catch (err) {
    console.log('failed to get user profile', err);
  }
};