redux-toolkit query auth persist

Question

你好，我创建了一个应用程序，可以很好地创建用户、获取用户、添加帖子、反应、删除帖子。现在我想将 AUTH 添加到我的应用程序中。但我很困惑如何保持状态、添加缩减器、操作和初始化这样的状态。

我在这里分享一些代码：

import { LOCAL_LOGIN, LOGIN, SIGN_OUT} from '../types';
const initialState = {
    user:null,
    token:null,
    is_logged_in:false
};
const LoginReducer = (state = initialState, action) => {
    switch(action.type) {
        case LOGIN:
            return {
                ...state,
                user:action.payload.data,
                token:action.payload.access_token,
                is_logged_in:true,
            };
        case LOCAL_LOGIN:
            return{
                ...state,
                user:action.payload.data,
                token:action.payload.access_token,
                is_logged_in:true,
            }
        case SIGN_OUT:
            return{
                ...state,
                user:null,
                is_logged_in:false
            }
        default:
            return state;
        }
    }
export default LoginReducer;

这工作正常。这是我的新代码

/// apiSlice.js

import {
    createApi,
    fetchBaseQuery
  } from "@reduxjs/toolkit/query/react";
  
  export const apiSlice = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({
      baseUrl: "https://ab91-203-82-55-110.ngrok.io/"
    }),
    tagTypes: ['Post', 'User'],
    endpoints: builder => ({})
  });

/// postSlice.js

import {
    createSelector,
    createEntityAdapter
} from "@reduxjs/toolkit";
import { apiSlice } from "../api/apiSlice";
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState()
export const usersApiSlice = apiSlice.injectEndpoints({
    endpoints: builder => ({
        getUsers: builder.query({
            query: () => '/users',
            transformResponse: responseData => {
                return usersAdapter.setAll(initialState, responseData)
            },
            providesTags: (result, error, arg) => [
                { type: 'User', id: "LIST" },
                ...result.ids.map(id => ({ type: 'User', id }))
            ]
        }),
        getUserByUserId: builder.query({
            query: id => `users/${id}`,
        })
    })
})

export const { useGetUsersQuery, useGetUserByUserIdQuery } = usersApiSlice

// returns the query result object
export const selectUsersResult = usersApiSlice.endpoints.getUsers.select()

// Creates memoized selector
const selectUsersData = createSelector( selectUsersResult,usersResult => usersResult.data)

//getSelectors creates these selectors and we rename them with aliases using destructuring
export const {
    selectAll: selectAllUsers,
    selectById: selectUserById,
    selectIds: selectUserIds
    // Pass in a selector that returns the posts slice of state
} = usersAdapter.getSelectors(state => selectUsersData(state) ?? initialState)

同样有userSlice.js

我的目标是添加 AuthSlice 和自定义减速器，当我调用登录时，状态将被初始化，这是我尝试做的。

import { createSlice,  createSelector,createEntityAdapter } from "@reduxjs/toolkit";
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState({
    user: null,
    is_logged_in:false,
    token:null
  })

  
  export const loginSlice = createSlice({
    initialState,
    name: 'userSlice',
    reducers: {
      logout: () => initialState,
      setUser: (state, action) => {
        state.user = action.payload.user,
        state.token = action.payload.token,
        state.is_logged_in = true
      },
    },
  });
  
  export default loginSlice.reducer;
  
  export const { logout, setUser } = loginSlice.actions;

但我很困惑我怎么称呼那里的减速器。

Answer 1

这是很旧的，但以防万一有人发现它。这就是你的处理方式

在你的 rtk-query API 中

export const api = createApi({
  reducerPath: 'OIS-API',
  baseQuery: fetchBaseQuery({
    baseUrl: `${base_url}`,
    credentials: 'include',
    extractRehydrationInfo(action, { reducerPath }) {
      if (action.type === REHYDRATE) {
        return action.payload[reducerPath];
      }
    },
    prepareHeaders: (headers, { getState }) => {
      const token =
       const token = getState().auth.token;
      if (token) {
        headers.set('authentication', `Bearer ${token}`);
      }
      return headers;
    },
  }),
  tagTypes: ['data'],
  endpoints: (builder) => ({
    signInWithgoogle: builder.mutation({
      omitted
     })

然后在你的授权片

extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.signInWithgoogle.matchFulfilled,
      (state, { payload }) => {
          state.token = payload.token;
          state.user = payload.user;
          state.isLoggedIn = true;
      }
    );
  },

更多信息Simulating Axios-like interceptors with a custom base query

您正在将令牌添加到标头的每个 HTTP 请求中。