Как лучше всего хранить данные с респонса регисстрации/логинизации?

Question

Дмитрий @roflanPominki

React
Redux

Как лучше всего хранить данные с респонса регисстрации/логинизации?

Хранить в AuthSlice user

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

import AuthService from '../../services/AuthService';
import { BASE_URL } from '../../http';
import { IUser } from '../../models/IUser';
import { AuthResponse } from '../../models/responce/AuthResponse';

export const registration = createAsyncThunk<IUser, {
  name: string,
  surname:string,
  email: string,
  password: string
}, { rejectValue : string }>(
  'auth/registration',
  async ({
    email, password, name, surname,
  }, { rejectWithValue }) => {
    const response = await AuthService.registration(email, password, name, surname);
    if (response.status !== 200) {
      return rejectWithValue('Err');
    }
    localStorage.setItem('token', response.data.accessToken);
    return response.data.user;
  },
);

export const login = createAsyncThunk<IUser,
{ email: string, password: string },
{ rejectValue : string }>(
  'auth/login',
  async ({ email, password }, { rejectWithValue }) => {
    const response = await AuthService.login(email, password);
    if (response.status !== 200) {
      return rejectWithValue('Err');
    }
    localStorage.setItem('token', response.data.accessToken);
    return response.data.user;
  },
);

export const logout = createAsyncThunk(
  'auth/logout',
  async (_, { rejectWithValue }) => {
    const response = await AuthService.logout();
    if (response.status !== 200) {
      return rejectWithValue('Err');
    }
    localStorage.removeItem('token');
  },
);

export const checkAuth = createAsyncThunk(
  'auth/checkAuth',
  async (_, { rejectWithValue }) => {
    const response = await axios.get<AuthResponse>(${BASE_URL}/auth/refresh, { withCredentials: true });

    if (response.status !== 200) {
      return rejectWithValue('Err');
    }
    localStorage.setItem('token', response.data.accessToken);
    return response.data.user;
  },
);

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: {} as IUser,
    isAuth: false,
    isLoading: false,
  },
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(registration.fulfilled, (state, action) => {
        state.isAuth = true;
        state.user = action.payload;
      })
      .addCase(registration.rejected, (state) => {
        state.isAuth = false;
      })
      .addCase(login.fulfilled, (state, action) => {
        state.isAuth = true;
        state.user = action.payload;
        state.isLoading = false;
      })
      .addCase(login.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(login.rejected, (state) => {
        state.isAuth = false;
        state.user = {} as IUser;
        state.isLoading = false;
      })
      .addCase(logout.rejected, (state) => {
        state.isAuth = false;
        state.user = {} as IUser;
        state.isLoading = false;
      })
      .addCase(logout.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(checkAuth.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(checkAuth.fulfilled, (state, action) => {
        state.isAuth = true;
        state.user = action.payload;
        state.isLoading = false;
      })
      .addCase(checkAuth.rejected, (state) => {
        state.isAuth = false;
        state.user = {} as IUser;
        state.isLoading = false;
        localStorage.removeItem('token');
      });
  },
});

export default authSlice.reducer;

Или в userSlice:

import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'User',
  initialState: {
    id: 0,
    firstName: '',
    secondName: '',
    password: '',
    email: '',
    biography: '',
    phoneNumber: '',
    subscribed: 0,
    subdomain: '',
    image: '',
    backgroundImage: '',
    followers: 0,
  },
  reducers: {
    setUserImage(state, action) {
      state.image = action.payload;
    },
    setUserBackgroundImage(state, action) {
      state.backgroundImage = action.payload;
    },
    setUserEmail(state, action) {
      state.email = action.payload;
    },
    setUserSubdomain(state, action) {
      state.subdomain = action.payload;
    },
    setUserName(state, action) {
      const userNameArr = action.payload.split(' ');
      state.firstName = userNameArr[0];
      state.secondName = userNameArr[1];
    },
    setUserBio(state, action) {
      state.biography = action.payload;
    },
    setUserPhone(state, action) {
      state.phoneNumber = action.payload;
    },
    setFolowers(state, action) {
      state.followers = action.payload;
    },
    setUser(state, action) {
      state.id = action.payload.id;
      state.firstName = action.payload.firstName;
      state.secondName = action.payload.secondName;
      state.password = action.payload.password;
      state.biography = action.payload.biography;
      state.phoneNumber = action.payload.phoneNumber;
      state.subscribed = action.payload.subscribed;
      state.subdomain = action.payload.subdomain;
      state.image = action.payload.image;
      state.followers = action.payload.followers;
    },
  },
});

export const {
  setUserImage, setUserEmail, setUserSubdomain, setUserName, setUserBio,
  setUserPhone, setFolowers, setUser, setUserBackgroundImage,
} = userSlice.actions;

export default userSlice.reducer;