React createSlice 的 extraReducers 的状态访问

Question

我有以下代码：

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

我以 reduc 模板的 counterSlice 为例来构建它，以及他们的作品。

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

我做错了什么？

Answer 1

Redux Toolkit 在 createSlice 中使用 Immer。 Immer 将您的原始数据包装在 Proxy 对象中，以便它可以跟踪尝试的“突变”。

不幸的是，这确实使记录草稿状态变得困难，因为浏览器以几乎不可读的格式显示代理。

state.logbook.push(action.payload) 行应该按原样有效。但是，如果你想更易读地记录数据，你可以使用我们从 RTK 导出的 Immer current 方法，它将 Proxy-wrapped 数据转换回普通的 JS 对象：

console.log(current(state))

参见https://redux-toolkit.js.org/api/other-exports#current。

React createSlice 的 extraReducers 的状态访问

React createSlice's extraReducers's state access

reactjs

redux

react-redux

redux-reducers