Why is Thunk-Redux turning an object into a string?

Why is Thunk-Redux turning an object into a string?

I've come across a strange issue with&nbsp;<strong>thunk-redux</strong>. I am writing a&nbsp;<strong>React-Redux</strong>&nbsp;app that calls a public API, and displays the data in a table. However, when I incorporated&nbsp;<strong>thunk middleware</strong>&nbsp;to handle the asynchronous API calls, my data is being stringified after the action is dispatched to the reducer.

I've come across a strange issue with thunk-redux. I am writing a React-Redux app that calls a public API, and displays the data in a table. However, when I incorporated thunk middleware to handle the asynchronous API calls, my data is being stringified after the action is dispatched to the reducer.

index.js (action creator)

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

<span class="hljs-keyword">const</span> url = <span class="hljs-string">`<span class="hljs-subst">${CVE_URL}</span>api/cve/<span class="hljs-subst">${cve}</span>`</span>;
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">dispatch</span> =&gt;</span> {
    dispatch(getData());

    fetch(PROXY + url)
    .then(<span class="hljs-function"><span class="hljs-params">blob</span> =&gt;</span> blob.json())
    .then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Request: '</span>, data);
        dispatch(getDataSuccess(data))
    })
    .catch(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {
        <span class="hljs-built_in">console</span>.log(e);
        dispatch(getDataFailure(e.message))
    });

}

}


data_reducer.js (reducer)

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, ...<span class="hljs-keyword">state</span>}
    case FETCH_SUCCESS: return [action.payload, ...<span class="hljs-keyword">state</span>]
    case ERROR: return {payload:[], error: true, ...<span class="hljs-keyword">state</span>}

}
return <span class="hljs-keyword">state</span>;

}


As you can see in the index.js action creator, console.log('Request: ', data); displays the JSON object I want. However, when I {console.log('TEST: ' + this.props.cve)} in my table component, the console shows:

TEST: [object Object]

At no point in my app am I "stringifying" my data - why/where could thunk-redux be turning my data into a string? I thank the community for any insight it can provide.

reactjs redux

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

An intro to Redux and how state is updated in a Redux application

I started learning Redux a few days back and it was an overwhelming concept for me at the start. After polishing my skills in ReactJS by making a&nbsp;<a href="https://github.com/aimenbatool/my-reads" target="_blank">personal book reading application</a>, I headed towards Redux to learn more about it.

What is the Redux Saga Effect?

Effects are the kind of utility that’s provided by the redux-saga package. when u invokes effects it returns object contains instructions which redux-saga interprets.

Redux Tutorial - Learn Redux from Scratch

Redux Tutorial - Learn Redux from Scratch - You'll learn: What is Redux? What is Functional Programming? Higher-order Functions; Functional Composition; Redux Architecture... Redux - A Predictable State Container for JS Apps. Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

React Boilerplates with Redux, Redux Saga and Best Practices

React Boilerplates with Redux, Redux Saga and Best Practices