I checked my actions, reducers by console logging the payload, and I'm getting the data from my api as expected, but when I want to use my state value using useSelector hook, I have an issue.

This is my Post ponent where I want to use my posts state which es from postsReducer reducer. (down below)

import React from "react";
import { useSelector } from "react-redux";

function Post() {

    const posts = useSelector((state) => state.postsReducer);
    console.log(posts); //undefined

    return (
        <>
            This is a single post
        </>
    );
}

This is my App ponent where I dispatched my fetch action to get data from api. (down below)

Actions (down below)

Reducer. (down below)

All API calls are working fine.
Only the useSelector is giving me headache !

I checked my actions, reducers by console logging the payload, and I'm getting the data from my api as expected, but when I want to use my state value using useSelector hook, I have an issue.

This is my Post ponent where I want to use my posts state which es from postsReducer reducer. (down below)

import React from "react";
import { useSelector } from "react-redux";

function Post() {

    const posts = useSelector((state) => state.postsReducer);
    console.log(posts); //undefined

    return (
        <>
            This is a single post
        </>
    );
}

This is my App ponent where I dispatched my fetch action to get data from api. (down below)

Actions (down below)

Reducer. (down below)

All API calls are working fine.
Only the useSelector is giving me headache !

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Jul 20, 2021 at 7:47 user7675 asked Dec 28, 2020 at 17:02 dev1cedev1ce 1,75755 gold badges2929 silver badges5757 bronze badges 9

• In the useSelector 's callback function, can you try console.log(state.postsReducer) ? – Thunderbolt Engineer Commented Dec 28, 2020 at 17:08
• Did you wrap your ponent to the Provider (react-redux.js/api/hooks#using-hooks-in-a-react-redux-app)? Did your state really changed (because default state is undefined). You can use chrome.google./webstore/detail/redux-devtools/… to see state changes. – KiraLT Commented Dec 28, 2020 at 17:12
• Can we see the root reducer's shape? What do you see when you inspect useSelector(state => state)? – Federkun Commented Dec 28, 2020 at 17:12
• 2 @dev1ce it would be helpful if you post code instead of image . – Chandan Commented Dec 28, 2020 at 17:18
• 2 Please review the SO help center at StackOverflow./help. All code, data, error messages, et al must be typed in as text. Images are not bet readable on mobile devices. Moreso, pics of text cannot be posted into code editors or search engines, thus it plicates the process of anyone being able to efficiently lend assistance. It also increases the risk of volunteers adding their own typos into your code sample. Be sure, too, to always include a fully functioning, reproducible example demonstrating your issue. You can edit your post to avoid closure, or to reopen it if it bees closed. – SherylHohman Commented Dec 28, 2020 at 19:50

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

Finally I resolved the issue, It is weird but I changed nothing, what I did, I created an index.js file inside my reducers folder for bining all the reducer files (I only had one in this case but still) and then exported that and it worked !

import { bineReducers } from "redux";
import { postsReducer } from "./posts";

const allReducers = bineReducers({postsReducer});

export default allReducers;

In some cases, a misspelling also causes the same error. For instance, your reducer could be postReducer but you access it as postsReducer

const posts = useSelector((state) => state.postsReducer);
    console.log(posts); //undefined