2017-12-19 24 views
0

데이터를 추출하려는 내 redux 프로젝트에서 API 서버를 호출하고 있습니다. API의 데이터 형식은 다음과 같습니다. 아래 :API 서버를 호출하는 동안 액시오스 응답의 객체에서 특정 속성을 삭제하는 방법

import axios from 'axios'; 
export const FETCH_CATEGORIES = 'fetch_categories'; 

let token; 
if (!token) 
    token = localStorage.token = Math.random().toString(32).substr(-8); 
const API = 'http://localhost:3001'; 
const headers = { 
        'Accept' : 'application/json', 
        'Authorization' : 'token' 
} 

export function fetchCategories() { 
    const URL = `${API}/categories`; 
    const request = axios.get(URL,{headers}); 

    return dispatch => { 
     return request.then((data) => { 
      dispatch({ 
      type : FETCH_CATEGORIES, 
      payload : data 
      }) 
     }) 
    } 
} 

내가 저장하려고 :

const defaultData = { 
    categories: [ 
     { 
     name: 'react', 
     path: 'react' 
     }, 
     { 
     name: 'redux', 
     path: 'redux' 
     }, 
     { 
     name: 'udacity', 
     path: 'udacity' 
     } 
    ] 
} 

그래서, 내 REDUX에 "작업", 내가 API call.The 작업 파일을 만들 Axios의를 사용하고는 아래와 같습니다 내 감속기의 응용 프로그램 상태에서 API 호출의 결과.

import _ from 'lodash'; 
import { FETCH_CATEGORIES } from '../actions/categories_action'; 

export default function(state={}, action) { 
    switch(action.type) { 
     case FETCH_CATEGORIES: 
     return {categories: {...state.categories, ...action.payload}}; 

     default: 
      return state; 
    } 
} 

그리고 아래 그림과 같이 내 인덱스 파일의 모든 감속기를 결합하는 combineReducers()을 사용하고 있습니다 : 범주에 대한 감속기은 다음과 같습니다

import { combineReducers } from 'redux'; 
import PostReducer from './PostsReducer'; 
import CategoriesReducer from './CategoriesReducer'; 

const rootReducer = combineReducers({ 
    loading: false, 
    posts: PostReducer, 
    categories: CategoriesReducer 
}); 

export default rootReducer; 

그런 다음에 내 구성 요소 상태에서 데이터를 표시하려고합니다.

value of categories

는하지만 그냥 카테고리 속성을 원하는 나는 세 가지를 얻을 여기서 내가 범주 상태의 값을 CONSOLE.LOG 할 때 아래의 그림과 같이 그래서, 나는 이런 식으로 뭔가를 얻을 수 카테고리 (구성, 헤더, 요청 속성 생략). 나는 심지어 같은 것을 시도했다 : console.log (this.props.categories.data.categories),하지만 그건 나에게 정의되지 않은 값을 준다. 아무도 도와 주실 수 있습니까?

+0

방법으로 콘솔에 로그인하는 것을 때문에이 라인 {categories: {...state.categories, ...action.payload}};

변경의 즉? – klugjo

+0

@klugjo 내 렌더링 메서드 내에서 로그를 남기려고합니다. 조금만 기다려주세요. 구성 요소 파일도 추가 할 것입니다. – pranami

답변

0

{categories: [...state.categories, ...action.payload.data.categories]};

+0

이것은 빈 객체를 반환합니다. – pranami

+0

제 잘못을 봅니다. {categories : [... state.categories, ... action.payload.data.categories]} – cdoshi

+0

좋아요, 작동합니다. 정말 고맙습니다. :) – pranami