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

Posted 2023-02-22

【中文标题】redux-toolkit -> 检测到不可序列化的值

【英文标题】：redux-toolkit -> non-serializable value detected

【发布时间】：2021-06-19 13:28:43

【问题描述】：

错误：

index.js:1 在操作中检测到​​不可序列化的值，在 路径：payload.config.transformRequest.0。

值：ƒ

transformRequest（数据，标头）

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]);

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

【问题讨论】：

return res; 应该是return res.data;

@NadiaCibrikova 谢谢，这解决了它。你能解释一下为什么当状态充满payload.data时它会给出这个^错误吗？

@NadiaCibrikova 所以如果我需要状态码，我该怎么办？

@ehsan 您需要构建一个包含您需要的字段的新对象，我假设它将是数据和状态代码，使用上面的代码作为示例而不是 return res 您将需要做类似return data: res.data, status: res.status

@NadiaCibrikova 是的，很好的解决方案。 tnx

【参考方案1】：

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

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

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