Блог

Это мой код:

 export const Wrapper = ({ children }) => {
  const authState = useAppSelector((state) => state.auth);
  const dispatch = useAppDispatch();
  const { clientsState, setClientsState } = useContext(ClientsContext);

  const token = getAuthenticationToken();

  // Configure socket
  useEffect(() => {
    if (authState.socket) return;
    const socket: SocketIOClient.Socket = WebsocketClient.connect('...', token);
    dispatch(setAuthState({ ...authState, socket, isAuthenticated: true }));
  });
});
 

authSlice.ts

 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IAuthState } from '../../types';

const initialState: IAuthState = {
  isAuthenticated: false,
  profile: null,
  socket: null,
};

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuthState(state, action: PayloadAction<IAuthState>) {
      state = action.payload;
    },
  },
});

export const { setAuthState } = authSlice.actions;
export const authReducer = authSlice.reducer;
 

Я пытаюсь передать сокет в redux, так как позже мне нужно будет вызвать различные методы для него. Но при этом я получаю эту ошибку:

 A non-serializable value was detected in an action, in the path: `payload.socket`. Value: 
Object { io: {…}, nsp: "/", json: {…}, ids: 0, acks: {}, receiveBuffer: [], sendBuffer: [], connected: false, disconnected: true, flags: {}, … }
 
Take a look at the logic that dispatched this action:  
Object { type: "auth/setAuthState", payload: {…} }
 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string…t-least-serializable-why-should-my-action-types-be-constants) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)
 

Что я понимаю. Это приводит меня сюда, и объяснение имеет смысл. Мне нужно добавить исключение в конфигурацию магазина.

Мой вопрос в том, как мне это сделать? Где я могу получить эти данные?

 configureStore({
  //...
  middleware: getDefaultMiddleware({
    serializableCheck: {
      // Ignore these action types
      ignoredActions: ['your/action/type'],
      // Ignore these field paths in all actions
      ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
      // Ignore these paths in the state
      ignoredPaths: ['items.dates'],
    },
  }),
}) // from docs