Redux 工具包 axios api 没有被调用答案

【问题标题】：Redux toolkit axios api is not getting calledRedux 工具包 axios api 没有被调用
【发布时间】：2022-01-25 04:50:09
【问题描述】：

有人可以帮我找出下面代码的确切问题吗，因为我是 redux 的新手。

API 未被调用
数据未进入状态 products[] 数组

product-slice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";<br/>
import axios from "axios";<br/>

const initialState = {<br/>
  products: [],<br/>
  sample: "Hello World",<br/>
};<br/>

<br/>
const productSlice = createSlice({<br/>
  name: "productSlice",<br/>
  initialState,<br/>
  reducers: {<br/>
    getProducts(state, action) {<br/>
      const p = action.payload;<br/>
      console.log(p);<br/>
    },<br/>
  },<br/>
  extraReducers: (builder) => {<br/>
    builder.addCase(fetchProductData.fulfilled, (state, action) => {<br/>
      state.products.push(action.payload);<br/>
    });<br/>
  },<br/>
});<br/>

export const fetchProductData = createAsyncThunk(<br/>
  "products/fetchProducts",<br/>
  async (_, thunkAPI) => {<br/>
    try {<br/>
      const response = await axios.get("http://localhost:8080/products");<br/>
      return await response.data;<br/>
    } catch (error) {<br/>
      return error;<br/>
    }<br/>
  }<br/>
);<br/>

export const productActions = productSlice.actions;<br/>

export default productSlice;<br/>

ProductList.js(Component)<br/>

const ProductList = (props) => {<br/>
  const history = useHistory();<br/>
  const hello = useSelector((state) => state.products.sample);<br/>
  const dispatch = useDispatch();<br/>
<br/>
  useEffect(() => {<br/>
    dispatch(fetchProductData);<br/>
  }, [dispatch]);<br/>

【问题讨论】：

你应该像 dispatch(fetchProductData()) 一样在 dispatch() 中调用 action 作为函数
感谢 Reza Ghorbani 现在调用 api，确认这是调用 API 的正确方式吗？

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

您应该调用action 作为dispatch() 中的函数，例如dispatch(fetchProductData())，并使用thunk 中间件实现redux/toolkit，如下所示（示例）：

正如您在reduxToolkitCreateAsyncThunk 中看到的那样

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    })
  },
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

【讨论】：