Блог

У меня очень ограниченное понимание инструментария redux по сравнению с его предыдущей версией. Я изо всех сил пытаюсь понять, почему мое состояние не обновляется на триггере пользователей, получающих доступ.

Я extraReducers также добавил и это.

 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchSample } from './filterAPI';

export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (dispatch, getState) => {
    console.log(getState, dispatch);
    const response = await fetchSample();
    return response;
  }
);

const primaryFiltersSlice = createSlice({
  name: 'primaryFilters',
  initialState: {
    dateFilter: {
      dates: {
        key: 'selection',
        startDate: new Date(),
        endDate: new Date(),
      },
      dummyData: null,
    },
    status: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.status = 'idle';
        state.dummyData = action.payload;
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.status = 'failed';
      });
  },
});

export default primaryFiltersSlice.reducer;
 

Вот функция fetchSample:

 export const fetchSample = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  return response.json();
};
 

Кроме того, я хочу отметить, что мое состояние меняется с ожидающего на простое и так далее, Но мое фактическое состояние не обновляется.

Вот скриншот для того же:

Я также хотел бы знать, как мы можем регистрировать сообщения в этих экстраредукторах.

Во — первых, глядя на вашу структуру данных, вы , вероятно, захотите обновить state.dateFilter.dummyData ее, а не state.dummyData -по крайней мере, предполагая, что вы хотите соответствовать своей initialState структуре.

Кроме того, createAsyncThunk не принимает обратный dispatch, getState вызов : правильным было бы

 export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (arg, {dispatch, getState}) => {
 

(но здесь это не имеет значения, так как вы не используете ни то, ни другое)

Что касается лесозаготовок… просто console.log ? Или вы имеете в виду, что получаете объект Proxz? В таком случае console.log(current(state))

По какой-то причине я могу отправлять действия, сохраняя обновление статуса внизу, а не вверху. Я хотел бы получить лучшее объяснение того же самого, вот что именно исправило мой код:

 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchSample } from './filterAPI';

export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (dispatch, getState) => {
    console.log(getState, dispatch);
    const response = await fetchSample();
    return response;
  }
);

// export const updateDates = () => {

// }

const primaryFiltersSlice = createSlice({
  name: 'primaryFilters',
  initialState: {
    dateFilter: {
      dates: {
        key: 'selection',
        startDate: new Date(),
        endDate: new Date(),
      },
      dummyData: null,
    },
    status: null,
  },
  reducer: {
    updateDate: (state, action) => {
      console.log('Actions = ', action);
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.dummyData = action.payload;
        state.status = 'idle';
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.status = 'failed';
      });
  },
});

export default primaryFiltersSlice.reducer;