Блог

у меня есть следующий код:

 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { client } from '../../api/client';

const initialState = {
    logBook: [],
    status: 'idle',
    error: null
};

export const logNewEntry = createAsyncThunk(
    'logBook/addNewEntry', 
    async (logEntry) => {
        const response = await client.post('/testPost', logEntry);
        console.log('post done');
        return response.data;
    }
);

const logBookSlice = createSlice({
  name: 'logBook',
  initialState,
  // non async calls
  reducers: {},
  },
  // async calls
  extraReducers: {
    [logNewEntry.fulfilled] : (state, action) => {
        console.log('add to list');
        console.log(state);
        console.log(action);
        state.logBook.push(action.payload);
    },
  },
})

//export const {resetName} = logBookSlice.actions;
export default logBookSlice.reducer;

export const selectLogBook = (state) => state.logBook.logBook;
 

это console.log(state); не ссылается на состояние журнала, и поэтому я не могу добавить в него новую запись. Какая консоль печатает:

 Proxy {i: 0, A: {…}, P: false, I: false, D: {…}, …}
[[Handler]]: null
[[Target]]: null
[[IsRevoked]]: true
 

Я использовал counterSlice шаблона reduction в качестве примера для создания этого и их работ.

     incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
 

что я делаю не так?

Инструментарий Redux использует Immer внутри createSlice . Immer помещает ваши исходные данные в прокси-объект, чтобы он мог отслеживать попытки «мутаций».

К сожалению, это затрудняет ведение журнала состояния черновика, поскольку браузеры отображают прокси в основном нечитаемом формате.

Строка state.logbook.push(action.payload) должна быть действительной как есть. Однако, если вы хотите, чтобы данные в журнале были более удобочитаемыми, вы можете использовать метод Immer current , который мы экспортируем из RTK, который преобразует данные, завернутые через прокси, обратно в обычный объект JS:

 console.log(current(state))
 

См . https://redux-toolkit.js.org/api/other-exports#current .