Use of useSelector redux hooks

Question

I made state in redux hooks I don't know how to import or useSelector the state I want

Here I am using the useSelector Send to state in Login file

function Login(props) {

var classes = useStyles();
var dispatch = useDispatch();

const { username, password } = useSelector((state) => ({
    ...state.combineReducers,
    ...state.userReducer,
}));

And that is nav file And here I want to get what's in the state

function nav(props) {

    const { username } = useSelector((state) => ({
        ...state.combineReducers,
        ...state.userReducer,
    }));

The error

 Failed to compile.

./src/NAVBAR/nav.js
  Line 27:  React Hook "useSelector" is called in function "nav" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

I have tried in many ways but it fails

Please avoid posting images and add a relevant code for creating a minimal reproducible example, refer to How to create a Minimal, Reproducible Example — Dennis Vash
– Dennis Vash, Commented Sep 21, 2019 at 14:25

Dennis Vash · Accepted Answer · 2020-04-18 16:01:26Z

6

The problem is that nav is a function and not a function-component.

In your case, you may want to make a custom-hook:

function useUsername() {
  const { userName } = useSelector(state => ({
    ...state.combineReducers,
    ...state.userReducer
  }));
  return { userName };
}

function Login(props) {
  const { userName } = useUsername();
  return <>...</>;
}

Note that if you want to make it a function component you need to return a ReactElement and be in scope with React import.

import React from 'react';

//        v Note that you must have an Upper-case for it to be a valid ReactElement
function Nav(props) {
  const { username } = useSelector(state => ({
    ...state.combineReducers,
    ...state.userReducer
  }));

  // return ReactElement
  return <>I'm some Element</>;
}

export default Nav;

edited Apr 18, 2020 at 16:01

answered Sep 21, 2019 at 14:20

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushil Subedi · Accepted Answer · 2020-05-29 14:08:56Z

1

I have faced a similar problem and found a simple solution.

const username = useSelector(state => state.userReducer.username)

so, we have taken specific username state from the reducer. This work for me:)

answered May 29, 2020 at 14:08

Sushil Subedi

746 bronze badges

Collectives™ on Stack Overflow

Use of useSelector redux hooks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related