환원기가 관리하는 상태에 따라 OR의 호출에 따라 환원기 구성을 구성해야 하는가?

환원기가 관리하는 상태에 따라 OR의 호출에 따라 환원기 구성을 구성해야 하는가?

나는 네가 이름을 입력하고 제출을 히트시킨 후에 포켓몬에 대한 정보를 제공하는 procedex 앱을 만드는 법을 배우고 있어.정확한 정보를 얻으려면 2번의 통화를 거쳐야 하는데, 1번은 키와 몸무게를 얻고, 2번은 설명을 얻는다(예: "차만데기는 보통 더운 곳에서 찾을 수 있다.아래는 나의 행동파악이다.

export const fetchPokemon = function (pokemonName) {
  return function (dispatch) {
    dispatch(requestPokemon(pokemonName))
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`
    return $.ajax({
      url: requestURL,
    }).done(function (data) {
      dispatch(receivePokemon(data))
      return fetchPokemonDescription(pokemonName)
    }).done(function (res) {
      dispatch(receivePokemonDescription(res))
    })
  }
}

...

export const fetchPokemonDescription = function (pokemonName) {
  return function (dispatch) {
    dispatch(requestPokemonDescription(pokemonName))
    const requestURL = `http://pokeapi.co/api/v2/pokemon-species/${pokemonName}/`
    return $.ajax({
      url: requestURL,
    })
  }
}

각 통화마다 환원기를 따로 준비해 놓을까?환원기 구성에 관한 문서를 보면 환원기 대 환원기 2개를 더 깔끔하게 만들 수 있을지 모르겠다.두 통화는 한 통화당 서로 의존하지 않지만, 각각의 다른 포켓몬 입력은 두 통화 모두 해야 하고 두 전화 모두로부터 돌아오는 데이터는 한 포켓몬에 속하기 때문에, 나는 한 개의 환원기에서 해야 한다고 생각했다.

나는 너의 경우 환원기를 1개 사용할 것이다.

당신의 국가 구조를 보는 것은 유용하겠지만, 나는 당신이 다음과 같은 것을 가지고 있다고 생각한다.

currentPokemon: {
  name: ...
  height: ...
  weight: ...
  description: ...
}

만약 그렇다면, 나는 1개의 환원기를 사용할 것이다. 왜냐하면 당신은 주의 1개 분기만 관리하기 때문이다.

환원기는 동작을 전환한다. 한 경우 높이와 중량을 업데이트하고 다른 경우 설명:

export default function currentPokemonReducer (state = initialState, action) {
  switch(action.type) {
    case DATA_RECEIVED:
      return {
        ...state,
        height: action.payload.height,
        weight: action.payload.weight
      }
    case DESCRIPTION_RECEIVED:
      return {
        ...state,
        description: action.payload
      }

    ...

    default:
      return state;
    }
}

당신이 걸고 있는 AJAX 통화는 동작 유형과 쌍으로 이루어져야 한다.그럼 그 유형과 페이로드도 돌려주셔야죠, 제 생각에 당신의 코드에 근거해서, 당신은 응답을 요청할 겁니다.

//Now sure where these functional are define or what they do, but I'll assume they are selectors of some sort?
export const fetchPokemon = function (pokemonName) {
  return function (dispatch) {
    dispatch(requestPokemon(pokemonName))
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`
    return $.ajax({
      url: requestURL,
    }).done(function (data) {
      dispatch(receivePokemon(data))
      return fetchPokemonDescription(pokemonName)
    }).done(function (res) {
      dispatch(receivePokemonDescription(res))
    })
  }
}

네 행동은 이렇게 보일지도 몰라

const data = fetchPokemon(Charmander);
//this can be defined somewhere else in your app, should not be in your actions file.    

export const pokemonAction(data) {
  return {
    type: "GET_POKEMON_NAME",
    payload: data.name
  }
}

//repeat for any other call

모범 사례는 유형별로 정의하여 작업 파일과 환원기 파일로 끌어들이도록 하는 것이다.여러분이 어떻게 여러분의 행동과 환원기를 만드느냐에 따라 많은 것들이 여러분의 반응 개체에 달려 있을 것이다.

export const getPokemonReducer(state= {}, action) {
  if(action.type === "GET_POKEMON_NAME") {
    return {
     ...state,
     [pokemonName]: action.payload
    }
   if(action.type === "GET_POKEMON_DESC") {
    return {
     ...state,
     [pokemonDesc]: action.payload
    }
}

환원기는 상태를 어떻게 형성하고자 하는지에 따라 여러 가지 방법으로 사용될 수 있다.당신은 당신의 어플리케이션을 통해 이 정보를 어떻게 사용하고 싶은지 생각해야 한다.위의 예에서는 단일 속성을 제공하며, 이를 "포켓몬"이라고 부르자, 속성 값은 위의 두 속성이 갖는 개체다.

예를 들어 이름만 뽑고 다른 이름으로 뽑지 않으려면.this.props.pokemon.pokemonName그럼 환원기를 따로 갖는 것도 고려해 볼 수 있을 거야나는 또한 다음과 같은 추상적인 생각을 하는 것을 고려해 볼 것이다.axios그리고redux-promise비동기식 통화를 훨씬 쉽게 관리할 수 있게 해 주는 것.

참조URL: https://stackoverflow.com/questions/39156312/should-i-organize-my-react-redux-reducer-composition-based-on-the-calls-made-or