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

Question

错误：

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

价值:ƒ

transformRequest(数据，标头){normalizeHeaderName(标头，“接受”)；normalizeHeaderName(标头，‘内容-类型’)；if (utils.isFormData(数据)\##*#.

切片：

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工具包中，并强制Redux建议只存储可序列化的数据。

可序列化意味着可以将其写为文本，并将其转换回原始对象，而不会丢失信息，而这些信息不能与函数一起工作。除了代码之外，javascript函数还具有作用域(与其相关联的内存)，它不能表示为文本。

Serializability检查整个有效负载(在数据到达存储之前执行，因此它不知道将使用哪些部分)并注意到config。由于config在其成员中有方法，所以序列化性警告您它是不可序列化的。您可以关闭中间件，但它可以检测真正的问题，因此通常只保留有效负载中的相关数据是一个更好的主意。