rest调用react+；重演
我正在学习如何使用Redux。我想创建一个只有一个按钮的简单应用程序。当点击按钮时，我想进行RESTAPI调用，当响应返回时，需要显示响应内容 我想做的是在用户单击按钮时向Redux发送一条rest调用react+；重演,rest,reactjs,onclick,redux,Rest,Reactjs,Onclick,Redux,我正在学习如何使用Redux。我想创建一个只有一个按钮的简单应用程序。当点击按钮时，我想进行RESTAPI调用，当响应返回时，需要显示响应内容 我想做的是在用户单击按钮时向Redux发送一条store.dispatch（CardAction.GET_CARDS）消息。我不想直接从按钮的onClick处理程序调用restapi 收到答案后，我打算发送一个带有store.dispatch（CardAction.UPDATE\u UI）的事件，并在后台更新Redux的状态 我希望这个概念与React+
store.dispatch（CardAction.GET_CARDS）store.dispatch（CardAction.UPDATE\u UI）<!DOCTYPE html>
<%@page session="false"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<base href="${pageContext.request.contextPath}/" />
<link rel="icon" type="image/x-icon" href="public/image/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
let store = createStore(reducers);
ReactDom.render(
<Provider store={store}>
<Card/>
</Provider>,
document.getElementById('root')
);
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
</div>
)
}
}
export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';
export function getCards(param1, param2) {
return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}
export function updateUi() {
return createAction(ActionType.UPDATE_UI)
}
export const reducers = (state = {}, action) => {
return action
};
export default {
cardPost(param1, param2) {
const url = ...;
fetch(url, {
method: 'POST',
credentials: 'include'
})
.then(response => {
if (response.ok) {
console.info('rest response have arrived');
store.dispatch(CardAction.UPDATE_UI)
} else {
console.info('error appeared during calling rest api');
//store.dispatch(CardAction.SHOW_ERROR)
}
})
.catch(function(err) {
console.info(err + ' Url: ' + url)
})
}
}
let store = createStore(reducers);
ReactDom.render(
<Provider store={store}>
<Card/>
</Provider>,
document.getElementById('root')
);
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
</div>
)
}
}
export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';
export function getCards(param1, param2) {
return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}
export function updateUi() {
return createAction(ActionType.UPDATE_UI)
}
export const reducers = (state = {}, action) => {
return action
};
export default {
cardPost(param1, param2) {
const url = ...;
fetch(url, {
method: 'POST',
credentials: 'include'
})
.then(response => {
if (response.ok) {
console.info('rest response have arrived');
store.dispatch(CardAction.UPDATE_UI)
} else {
console.info('error appeared during calling rest api');
//store.dispatch(CardAction.SHOW_ERROR)
}
})
.catch(function(err) {
console.info(err + ' Url: ' + url)
})
}
}
let store = createStore(reducers);
ReactDom.render(
<Provider store={store}>
<Card/>
</Provider>,
document.getElementById('root')
);
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
</div>
)
}
}
export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';
export function getCards(param1, param2) {
return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}
export function updateUi() {
return createAction(ActionType.UPDATE_UI)
}
export const reducers = (state = {}, action) => {
return action
};
export default {
cardPost(param1, param2) {
const url = ...;
fetch(url, {
method: 'POST',
credentials: 'include'
})
.then(response => {
if (response.ok) {
console.info('rest response have arrived');
store.dispatch(CardAction.UPDATE_UI)
} else {
console.info('error appeared during calling rest api');
//store.dispatch(CardAction.SHOW_ERROR)
}
})
.catch(function(err) {
console.info(err + ' Url: ' + url)
})
}
}
永远不要从组件调用store.dispatch（）。相反，您应该导入以前构建的操作，并让Redux流完成剩余的工作。reducer不应该返回操作，相反，它应该返回一个新的状态，而不改变前一个状态。我建议您首先弥补一些可理解的缺乏Redux经验的不足，然后您可以尝试遵循React Redux Rest教程，如下所示： [编辑] 这是我要做的
//组件卡.js
从“CardAction”导入{getCards}；
导出默认类别卡扩展React.Component{
render（）{
返回(
...
休息电话
)
}
}
//action.js
const receivedCards=（卡片）=>({
类型：“收到的卡片”，
卡
})
导出函数getCards（参数1、参数2）{
//idk你要在哪里使用这些参数
//另外请注意，旧浏览器不支持fetch（）。这里我向您展示了一个使用axios的简单示例，它基本上执行相同的操作。请随意调整此示例代码。
返回功能（调度）{
返回轴({
url:服务器+“端点”，
超时：20000，
方法：“获取”
})
.然后（功能（响应）{
让卡片=response.data；
发送（接收卡（卡片））；
})
.catch（函数（响应）{
日志（response.data.error）；
})
}
};
//减速器
常量initialState={}；
导出默认值（状态=初始状态，操作）=>{
开关（动作类型）{
案例“收到的信用卡”：
返回Object.assign（{}，
国家,，
{卡片：action.cards}）；
违约：
返回状态；
}
}