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

• 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

2 Answers 2

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