javascript - Redux 工具包和 Axios

Question

我正在使用 Redux Toolkit 通过 Axios 连接到 API。 我正在使用以下代码:

const products = createSlice({
    name: "products",
    initialState: {
        products[]
    },
    reducers: {
        reducer2: state => {
            axios
                .get('myurl')
                .then(response => {
                    //console.log(response.data.products);
                    state.products.concat(response.data.products);
            })

        }
    }
});

axios 正在连接到 API，因为要打印到控制台的注释行正在向我显示数据。但是，state.products.concat(response.data.products);抛出以下错误:

类型错误:无法在已撤销的代理上执行“get”

有什么办法可以解决这个问题吗？

Answer 1

我更愿意将 createAsyncThunk 与 extraReducers 一起用于 API 数据

假设此页面名称为 productSlice.js

从“@reduxjs/toolkit”导入{ createSlice,createSelector,PayloadAction,createAsyncThunk,}；

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts", async (_, thunkAPI) => {
     try {
        //const response = await fetch(`url`); //where you want to fetch data
        //Your Axios code part.
        const response = await axios.get(`url`);//where you want to fetch data
        return await response.json();
      } catch (error) {
         return thunkAPI.rejectWithValue({ error: error.message });
      }
});

const productsSlice = createSlice({
   name: "products",
   initialState: {
      products: [],
      loading: "idle",
      error: "",
   },
   reducers: {},
   extraReducers: (builder) => {
      builder.addCase(fetchProducts.pending, (state) => {
        state. products = [];
          state.loading = "loading";
      });
      builder.addCase(
         fetchProducts.fulfilled, (state, { payload }) => {
            state. products = payload;
            state.loading = "loaded";
      });
      builder.addCase(
        fetchProducts.rejected,(state, action) => {
            state.loading = "error";
            state.error = action.error.message;
      });
   }
});


export const selectProducts = createSelector(
  (state) => ({
     products: state.products,
     loading: state.products.loading,
  }), (state) =>  state
);
export default productsSlice;

在您的store.js中添加productsSlice: productsSlice.reducer到out store reducer 中。

然后为了在组件中使用添加这些代码......我也更喜欢使用钩子(Hook)

import { useSelector, useDispatch } from "react-redux";

import {
  fetchProducts,
  selectProducts,
} from "path/productSlice.js";

然后最后一部分像这样在你的主管中调用这些方法

const dispatch = useDispatch();
const { products } = useSelector(selectProducts);
React.useEffect(() => {
   dispatch(fetchProducts());
}, [dispatch]); 

最后，您可以在组件中将数据作为产品进行访问。