redux-toolkit&devise_token_auth

README.md

ReduxToolkit DeviseTokenAuth CurrentUser

Description

save currentUser & header support monky patch

Example

import { useDispatch, useSelector } from "react-redux";
import {
  selectCurrentUser,
  selectHeaders,
  setHeaders,
} from "currentUser";

const dispatch = useDispatch();
const currentUser = useSelector(selectCurrentUser);
const headers = useSelector(selectHeaders);

axios.post(/* path */, /* params */, headers)
  .then(res=>{
    dispatch(setHeaders(res.headers));
  })

currentUser.ts

/* eslint-disable import/no-cycle */
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { IUser } from "../../interfaces";
import { RootState } from "../../store";

export interface ITokenHeaders {
  ["content-type"]: string;
  ["access-token"]: string;
  client: string;
  uid: string;
}
interface ICurrentUser {
  currentUser?: IUser;
  headers?: { headers: ITokenHeaders };
}
const initialState: ICurrentUser = {
  currentUser: undefined,
  headers: undefined,
};

const currentUserSlice = createSlice({
  name: "currentUser",
  initialState,
  reducers: {
    setCurrentUser: (state, action: PayloadAction<IUser>) => {
      state.currentUser = action.payload;
    },
    setHeaders: (state, action: PayloadAction<ITokenHeaders>) => {
      const {
        "content-type": contentType,
        "access-token": accessToken,
        client,
        uid,
      } = action.payload;
      // Batch Request
      const prevAccessToken = state.headers?.headers["access-token"] || "";
      state.headers = {
        headers: {
          "content-type": contentType,
          "access-token": accessToken || prevAccessToken,
          client,
          uid,
        },
      };
    },
    remove: (state) => {
      state.currentUser = undefined;
      state.headers = undefined;
    },
  },
});

export const selectCurrentUser = (state: RootState): undefined | IUser =>
  state.currentUser.currentUser;
export const selectHeaders = (
  state: RootState
): undefined | { headers: ITokenHeaders } => state.currentUser.headers;
export const { setCurrentUser, setHeaders, remove } = currentUserSlice.actions;
export default currentUserSlice.reducer;