如何使用redux thunk获取数据

Question

伙计们希望你们都做得很好，我正在使用 redux，但没有得到结果， 我想逐步描述我的问题，希望它有助于理解
(1) 邮递员结果 (i) 获取请求，(ii) JSON 数据

这是itemList.jsx的代码

const ItemList = (props) => {
    // this value is coming from parent component and here it's value is 1
    //as in postman data 
    const value = props.myData
    console.log(`value is ${value}`)

    const dispatch = useDispatch();

    const { rows } = useSelector(state => state.product);
    console.log(rows)

    useEffect((value) => { // value = 1
        console.log(` hello world ${value}`)

        const jsondata = { "categoryId_fk": 1 } // i am not sure that i would have to pass data like it 
        console.log(`this is my new console ${jsondata}`)
        dispatch(getProductByCategory(jsondata));

    }, [dispatch])

这是productAction.js的代码 //productAction

import axios from 'axios';
import {
    GET_PRODUCTS_BY_CATEGORY_REQUEST,
    GET_PRODUCTS_BY_CATEGORY_SUCCESS,
    GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,

    CLEAR_ERRORS
} from '../Constrants/ProductConstrants.js'
console.log('hello world')
export const getProductByCategory = (categoryId_fk) => async(dispatch)=>{
    console.log(categoryId_fk)
    try {
        dispatch({type: GET_PRODUCTS_BY_CATEGORY_REQUEST})
        const{ data } = await axios.get('/api/v1/catproduct',categoryId_fk)
        console.log(data)
        dispatch({
            type: GET_PRODUCTS_BY_CATEGORY_SUCCESS,
            payload: data
        })

    } catch (error) {
        dispatch({
            type:GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,
            payload: error.response.data.message
        })
    }
}

这里是productReducer的代码

import {
    GET_PRODUCTS_BY_CATEGORY_REQUEST,
    GET_PRODUCTS_BY_CATEGORY_SUCCESS,
    GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,

    CLEAR_ERRORS
} from '../Constrants/ProductConstrants.js'
export const productReducer  = (state = { products : []},action)=>{
    switch(action.type){
        case GET_PRODUCTS_BY_CATEGORY_REQUEST:
            return {
                loading: true,
                products: []
            }
        case GET_PRODUCTS_BY_CATEGORY_SUCCESS:
            return{
                loading: false,
                rows: action.payload.rows,
            }
            case GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL:
                return {
                    loading: false,
                    error: action.payload
                }
                case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }
            default:
            return state
    }
} 

Answer 1

尝试像这样使用 axios

const{ data } = await axios.get(`/api/v1/catproduct/${categoryId_fk}`)