redux-toolkit -> 检测到不可序列化的值

Question

错误：

index.js:1 A non-serializable value was detected in an action, in the path: payload.config.transformRequest.0.

值：ƒ

transformRequest(data, headers) {

normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');

if (utils.isFormData(data) || utils.isArrayBuffer(data) || utils.i…

切片：

export const getProducts = createAsyncThunk(
    'products/getProducts', 
    async() => {
        const res = await axios.get('http://localhost:5000/products/view-products', {withCredentials: true});
        return res;
    }
)

const getProductsSlice = createSlice({
    name : 'products',
    initialState : {
        list : [],
        status : null
    },
    extraReducers : {
        [getProducts.pending] : (state) => {
            state.status = 'loading'
        },
        [getProducts.fulfilled] : (state, {payload}) => {
            console.log("produtcts payload: ", payload.data)
            state.list = payload.data
            state.status = 'success'
        },
        [getProducts.rejected] : (state) => {
            state.status = 'failed'
        }
    }
})

内部组件：

const dispatch = useDispatch();
    const data = useSelector(state => state.products.list);
    console.log("the products are :", data);

    useEffect(() => {
        dispatch(getProducts());
    }, [dispatch]);

应用中的其他切片工作正常。很难解决 不可序列化

Answer 1

按原样返回 axios.get 结果的问题在于，除了 data 之外，它还包含与请求相关的各种其他字段，包括您获得的 config错误。虽然您只保存 data 而不是 config，但随着整个 res 对象传递到存储，它会通过一个名为 Serializability 的中间件，它包含在 redux-toolkit 中并强制执行 Redux建议仅存储可序列化数据。

Serializable 意味着它可以作为文本写下来并转换回原始对象而不会丢失信息，这不适用于函数。 javascript 除了代码之外的函数也有作用域（与之关联的内存），不能用文本表示。

可串行化检查整个负载（它在您的数据到达存储之前执行，因此它不知道将使用哪些部分）并通知 config。由于 config 在其成员中有方法，可序列化性提醒您它不可序列化。您可以关闭中间件，但它可以检测到真正的问题，因此通常最好只在有效负载中保留相关数据。

redux-toolkit -> 检测到不可序列化的值

redux-toolkit -> non-serializable value detected

express

reactjs

redux-thunk

redux-toolkit