데이터를 추출하려는 내 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;
그런 다음에 내 구성 요소 상태에서 데이터를 표시하려고합니다.
이는하지만 그냥 카테고리 속성을 원하는 나는 세 가지를 얻을 여기서 내가 범주 상태의 값을 CONSOLE.LOG 할 때 아래의 그림과 같이 그래서, 나는 이런 식으로 뭔가를 얻을 수 카테고리 (구성, 헤더, 요청 속성 생략). 나는 심지어 같은 것을 시도했다 : console.log (this.props.categories.data.categories),하지만 그건 나에게 정의되지 않은 값을 준다. 아무도 도와 주실 수 있습니까?
방법으로 콘솔에 로그인하는 것을 때문에이 라인
{categories: {...state.categories, ...action.payload}};
변경의 즉? – klugjo
@klugjo 내 렌더링 메서드 내에서 로그를 남기려고합니다. 조금만 기다려주세요. 구성 요소 파일도 추가 할 것입니다. – pranami