Question

我正在使用不允许我调用特定ID的API。在使用看起来像这样的钩子

之前，我已经进行了变通。

import React from 'react'

export const fetchHeroDetail = async (id) => {
    const data = await fetch(`https://api.opendota.com/api/heroStats`)
    console.log(data)
    const heroDetails = await data.json()
    console.log(heroDetails)
    console.log(heroDetails.find(heroDetail => heroDetail.id === +id))
    return heroDetails.find(heroDetail => heroDetail.id === +id)

};

但是我现在正在使用Redux。我的应用程序基本上显示了完整的字符列表，并允许您单击一个。当我这样做时，我使用useParams（）来获取被单击的ID，而我试图使用它来筛选API。我是Redux的新手，所以请保持温柔。这是我的动作，减速器，页面和组件

heroAction.js

import { store } from '../index';
export const GET_HERO = 'GET HERO'
export const GET_HERO_SUCCESS = 'GET_HERO_SUCCESS'
export const GET_HERO_FAILURE = 'GET_HERO_FAILURE'


export const getHero = () => ({
    type: GET_HERO,
})

export const getHeroSuccess = hero => ({
    type: GET_HERO_SUCCESS,
    payload: hero,
})

export const getHeroFailure = () => ({
    type: GET_HERO_FAILURE,
})


export const fetchHero = async() => {
    store.dispatch(getHero())

    try {
        const response = await fetch('https://api.opendota.com/api/heroStats')
        console.log(response)
        const data = await response.json()
        console.log(data)

        store.dispatch(getHeroSuccess(data))
    } catch (error) {
        store.dispatch(getHeroFailure())
    }
}

Hero.js

import React from 'react'

export const Hero = ({ hero }) => (
    <h2>
        <h2>{hero.localized_name}</h2>
    </h2>
)

HeroPage.js

import React, {useEffect} from 'react'
import { useSelector } from 'react-redux'

import { fetchHero } from '../actions/heroAction'
import { Hero } from '../components/Hero'
import {useParams} from "react-router";

const HeroPage = () => {
    const data = useSelector(state => state.hero);
    const heroId = useParams()
    useEffect(() => {
        (fetchHero(heroId))
    }, [heroId])

    const renderHero = () => {
        if (data.loading) return <p>Loading posts...</p>
        if (data.hasErrors) return <p>Unable to display posts.</p>
        return data.hero.find(hero => <Hero key={hero.id} hero={hero} />)
    }

    return (
        <section>
            <h1>Hero</h1>
            {renderHero()}
        </section>
    )
}


export default HeroPage

heroReducer.js

import * as actions from '../actions/heroAction'

export const initialState = {
    hero: [],
    loading: false,
    hasErrors: false,
}

export default function heroReducer(state = initialState, action) {
    switch (action.type) {
        case actions.GET_HERO:
            return { ...state, loading: true }
        case actions.GET_HERO_SUCCESS:
            return { hero: action.payload, loading: false, hasErrors: false }
        case actions.GET_HERO_FAILURE:
            return { ...state, loading: false, hasErrors: true }
        default:
            return state
    }
}

Answer 1

使用redux-thunk，您的异步代码将类似于：

export const fetchHero = () => async dispatch => {
  dispatch(getHero())

  try {
    const response = await fetch('https://api.opendota.com/api/heroStats')
    console.log(response)
    const data = await response.json()
    console.log(data)

    dispatch(getHeroSuccess(data))
  } catch (error) {
    dispatch(getHeroFailure())
  }
}

使用Redux + React使用useParams

1 个答案: