Почему Thunk-Redux превращает объект в строку? - PullRequest
Новая
       9

Почему Thunk-Redux превращает объект в строку?

0 голосов
/ 17 февраля 2019

Я столкнулся со странной проблемой с thunk-redux .Я пишу приложение React-Redux , которое вызывает публичный API и отображает данные в виде таблицы.Однако, когда я включил thunk middleware для обработки асинхронных вызовов API, мои данные подвергаются строковой обработке после того, как действие отправлено редуктору.

index.js (создатель действия) 

export const FETCHING_DATA = 'FETCHING_DATA';
export const FETCH_SUCCESS = 'FETCH_SUCCESS';
export const ERROR = 'ERROR';

export const getData = () => {
    return {
        type : FETCHING_DATA
    }
}

export const getDataSuccess = (data) => {
    return {
        type : FETCH_SUCCESS,
        payload: data
    }
}

export const getDataFailure = () => {
    return {
        type : ERROR
    }
}

export function searchCVE(cve){
    
    const url = `${CVE_URL}api/cve/${cve}`;
    return dispatch => {
        dispatch(getData());

        fetch(PROXY + url)
        .then(blob => blob.json())
        .then(data => {
            console.log('Request: ', data);
            dispatch(getDataSuccess(data))
        })
        .catch(e => {
            console.log(e);
            dispatch(getDataFailure(e.message))
        });

    }
}

data_reducer.js (редуктор) 

import {FETCHING_DATA ,FETCH_SUCCESS, ERROR } from '../actions/index.js';

const initialState = {
    payload:[],
    fetching: false,
    error: false
}
export default function(state=initialState, action){
    console.log('Got CVE: ', action);

    switch (action.type){
        case FETCHING_DATA: return {payload:[], fetching: true, ...state}
        case FETCH_SUCCESS: return [action.payload, ...state]
        case ERROR: return {payload:[], error: true, ...state}
             
    }
    return state;

}

Как видно из создателя действия index.js , console.log('Request: ', data); отображает нужный мне объект JSON.Тем не менее, когда я {console.log('TEST: ' + this.props.cve)} в компоненте таблицы, консоль показывает:

TEST: [объект объекта]

В моем приложении нигде нет строчки«мои данные - почему / где thunk-redux превращает мои данные в строку?Я благодарю сообщество за любую информацию, которую оно может предоставить.

1 Ответ

0 голосов
/ 17 февраля 2019

Ни в одной точке своего приложения я не "строжай" свои данные - почему / где thunk-redux мог превращать мои данные в строку?

redux-thunk не могделать это ни при каких обстоятельствах.Это смертельно просто ;все, что он делает, это обрабатывает действие функции по-другому.

Проблема в том, что вы странизируете объект, оператор сложения + приводит объект к строке: 

{console.log('TEST: ' + this.props.cve)}

Если объект должен отображаться в консоли, он должен быть: 

{console.log('TEST: ', this.props.cve)}

Или он может отображаться в DOM: 

<code><pre>{JSON.stringify(this.props.cve, null, 2)}
...