2017-12-19 18 views
0

私のreduxプロジェクトから、データを抽出するAPIサーバを呼び出しています。APIのデータは、以下に示す:だからAPIサーバを呼び出す際に、Axiosレスポンスのオブジェクトから特定のプロパティを削除する方法

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

、私のReduxの"アクション"で、私はAPIのcall.Theアクションファイルを作成するaxiosを使用していますが、以下に与えられる:

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 
      }) 
     }) 
    } 
} 

私が保存しようとしています私の減速機のアプリケーション状態で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; 

その後、私の中でコンポーネント私は州からのデータを表示しようとしています。 私はカテゴリの状態の値をCONSOLE.LOGしようとすると、下の画像に示すように、私はこのような何かを得る:

value of categories

しかし、私は3を取得する場所私はちょうどカテゴリのプロパティをしたいですカテゴリ(設定、ヘッダ、リクエストのプロパティを省略したい)。 私は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

関連する問題