React Redux --> UseSelector --> Not Working

Viewed 953

I am trying to make a simple exercise for react-redux to understand the process but somehow I am stuck .. any help would be really appreciate.

The interesting part is when I do subscribe and try to log store into the console, it works and shows me updated value but I am not able to select it using useSelector Also with the help of Dev tool's i could see the state being changed from INIT to ADD_USER..

Below are my components files and reducers.

App.js

import React from "react";
import {  Provider } from "react-redux";
import  store from "./stores/store";
import { HomePage } from "./components/containers/HomePage";


function App() {
    return (
        <Provider store={ store }>
            <HomePage/>
        </Provider>
    );
}

export default App;

HomePage.js. --> Here state.isLogin is not selected.. but the subscribe comment works

import React from "react";
import { Sidebar } from "./Sidebar";
import { LoginPage } from "./LoginPage";
import { useSelector } from "react-redux";

export const HomePage = () => {
    const userLogin = useSelector(state => state.isLogin);
 // const storeState = store.subscribe (() => console.log(store.getState()));

    return (
              <div>
                <LoginPage />
                <Sidebar />
            </div>

        );
};

LoginPage.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import * as action from "../../action/index";


export const LoginPage = (setLogin) => {

    const dispatch = useDispatch();
    const [name, setName] = useState("");

    const createUser = (e) => {
        e.preventDefault();
        const addUser = {
            name: name,
            isLogin: true
        };
        dispatch(action.addUsers(addUser));
    };

    return (
            <div className="card border-0 shadow">
                <div className="card-header">Login Here!</div>
                <div className="card-body">
                    <form onSubmit={(e) => createUser(e)}>
                        <div className="form-group">
                            <input
                                type="text"
                                className="form-control"
                                placeholder="Enter Your Name"
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                            />
                        </div>
                        <button className="btn btn-primary" type="submit">
                            Create Contact
                        </button>
                    </form>
                </div>
            </div>
    );
};

reducers - Index.js and user.js

import userReducer from './users'

import { combineReducers} from "redux";

const allReducers = combineReducers({
    addUser : userReducer,

});

export  default  allReducers;

User.js

import * as types from '../actionTypes/index'

const intialState = {
    user: [],
    messages : [],
    isLogin : false
};
const users = (state = intialState, action) => {
    switch (action.type) {
        case types.ADD_USER:
            return {
                ...state,
                user: [action.payload.name, ...state.user],
                isLogin: action.payload.isLogin
            };
        default:
            return state
    }
}

export default users;

Store.js

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import allReducers from '../reducers'

const store = createStore(allReducers,composeWithDevTools());

export default store;

Any idea's/Input on what went wrong ? or what is the issue?

Thank you

1 Answers

Try using below code in HomePage

 const userLogin = useSelector(state => state.addUser.isLogin);
Related