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）;引发以下错误：

TypeError：无法对已撤销的代理执行“获取”

有什么办法可以解决此问题？

Answer 1

发生这种情况是因为您的reducer函数不是纯函数，它不应具有任何异步调用。

类似的东西应该起作用。它将解决您得到的错误

const products = createSlice({
    name: "products",
    initialState: {
        products: []
    },
    reducers: {
        reducer2: (state, { payload }) => {
                return { products: [...state.products, ...payload]}
         })

      }
    }
});

和api应该在外部调用

const fetchProducts = () => {

   axios.get('myurl')
     .then(response => {
        //console.log(response.data.products);
        store.dispatch(products.actions.reducer2(response.data.products))
   })
};

PS：尚未尝试运行以上代码，您可能必须根据需要进行修改。