Javascript ReactJs:-如何在单击按钮时调用dispatch
我在Login.js中有以下代码-Javascript ReactJs:-如何在单击按钮时调用dispatch,javascript,reactjs,redux,Javascript,Reactjs,Redux,我在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,GlobalConsume
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
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;
}
}
我如何在单击按钮时呼叫store.dispatch
我试过了-
<Button color="success" onClick={() => store.dispatch({ type: 'VERIFY_CREDENTIALS' })}></Button>
store.dispatch({type:'VERIFY_CREDENTIALS'})}>
但是这并没有帮助,不要在减缩器中编写异步代码 还原程序应该返回一个更新状态,因为您没有从还原程序返回任何内容。在默认情况下,返回现有状态
export const LoginReducer=(state=initialState,action)=>{
switch (action.type) {
case 'VERIFY_CREDENTIALS':
return {...state, ...action.payload}
default:
return state;
}
}
组成部分
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>
async callAPI=()=>{
常量url=http://localhost:52016/api/values/“;//搬到更好的地方去
const{data}=await Axios.get(url);
dispatch({type:'VERIFY_CREDENTIALS',payload:data})
}
首先要像这样更换减速器:,并将您的表格放入全球消费者
。您应该使用react redux软件包