ReactJs :- How to call dispatch on button click

Question

I have below code in Login.js -

import React from 'react'
import {Button} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { VerifyCredentials } from "./LoginReducers/Login_Action";
import   {GlobalProvider,GlobalConsumer} from "../GlobalStore";
import { LoginReducer } from "./LoginReducers/Login_Reducers";
function Login() {
    return (
        <div>
            <GlobalConsumer>
                {
                    store=>{
                        store.dispatch(LoginReducer)
                    }
                }
            </GlobalConsumer>
            
                <form>
                <input type="text" name="txtLoginId" ></input>
                <input type="password" name="txtPassword" ></input>
                <Button color="success"></Button>
                </form>
            
            
        </div>
    )
}

export default Login

I have Login_Reducer.js-

import Axios from "axios";
import { VerifyCredentials } from "./Login_Action";

const initialState={
    userName:"",
    password:"",
    isVarified:false
}
const url='http://localhost:52016/api/values/';
export const  LoginReducer=(state=initialState,action)=>{
    switch (action.type) {
        case 'VERIFY_CREDENTIALS':
            
            Axios.get(url)
                 .then(x=>{
                     alert(x.data);

                 })
    
        default:
            break;
    }
}

How can I call store.dispatch on button click?

I tried with -

<Button color="success" onClick={() => store.dispatch({ type: 'VERIFY_CREDENTIALS' })}></Button>

But this doesnt helped

firt of all change your reducer like this : stackoverflow.com/a/65420360/12608714 , and also put ur form inside GlobalConsumer. — b3hr4d
– b3hr4d, Commented Dec 23, 2020 at 7:32
You should use the react-redux package react-redux.js.org/introduction/quick-start — Rahul Sharma
– Rahul Sharma, Commented Dec 23, 2020 at 7:32

Rahul Sharma · Accepted Answer · 2020-12-23 07:41:07Z

1

Don't write async code inside reducers,

Reducers should return an updated state you are not returning anything from reducers. In default case return existing state.

export const  LoginReducer=(state=initialState,action)=>{
    switch (action.type) {
        case 'VERIFY_CREDENTIALS':
            return {...state, ...action.payload}  
        default:
            return state;
    }
}

Component

async callAPI =() => {
    const url='http://localhost:52016/api/values/'; // move to better place
    const {data} = await Axios.get(url);
    store.dispatch({ type: 'VERIFY_CREDENTIALS', payload: data })
}

<Button color="success" onClick={callAPI}></Button>

answered Dec 23, 2020 at 7:41

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

ReactJs :- How to call dispatch on button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related