ЯсноПонятно24

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getBurgers } from '../utils/burger-api';

const initialState = {
  burgers: [],
  loading: false,
  error: null
};

export const fetchBurgers = createAsyncThunk(
  'burgers/fetchBurgers',
  async () => {
    const response = await getBurgers();
    return response.data;
  }
);

const burgerSlice = createSlice({
  name: 'burgers',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchBurgers.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchBurgers.fulfilled, (state, action) => {
        state.loading = false;
        state.burgers = action.payload;
      })
      .addCase(fetchBurgers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export const selectBurgers = (state) => state.burgers.burgers;
export const selectLoading = (state) => state.burgers.loading;
export const selectError = (state) => state.burgers.error;

export const { reducer } = burgerSlice;
export default burgerSlice;

import { configureStore } from '@reduxjs/toolkit';
import burgerSlice, { fetchBurgers } from './burgerSlice';

const rootReducer = {
  burgers: burgerSlice.reducer
};

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production'
});

store.dispatch(fetchBurgers());

export type RootState = ReturnType<typeof rootReducer>;

export type AppDispatch = typeof store.dispatch;

export const useDispatch = () => dispatchHook();
export const useSelector = selectorHook;

export default store;