[英]React Action Requests and Redux Structure
I have successfully created an action doing a call request to the following endpoint我已经成功创建了一个动作,向以下端点发出调用请求
https://api-football-v1.p.rapidapi.com/v2/statistics/{league_id}/{team_id}
API Documentation is here API 文档在这里
I have created a little demo in codesandbox where you can see i can display the matchs wins
, draws
and loses
correctly in my component Stats.js
for the Sao Paulo Team ( it is an example )我在 codeandbox 中创建了一个小演示,您可以在其中看到我可以在我的组件
Stats.js
为圣保罗队正确显示比赛的wins
、 draws
和loses
(这是一个例子)
Here all the steps i have done, i show you only the relevant code to achieve it这是我完成的所有步骤,我只向您展示实现它的相关代码
In my reducers i have created the following cases在我的减速器中,我创建了以下案例
RECEIVE_TEAMS_STATS_WIN_HOME,
RECEIVE_TEAMS_STATS_WIN_AWAY,
RECEIVE_TEAMS_STATS_DRAW_HOME,
RECEIVE_TEAMS_STATS_DRAW_AWAY,
RECEIVE_TEAMS_STATS_LOSE_HOME,
RECEIVE_TEAMS_STATS_LOSE_AWAY
In my initial state i have在我的初始状态,我有
teamsStatsWinHome: [],
teamsStatsWinAway: [],
teamsStatsDrawHome: [],
teamsStatsDrawAway: [],
teamsStatsLoseHome: [],
teamsStatsLoseAway: [],
These are my cases这些是我的情况
case RECEIVE_TEAMS_STATS_WIN_HOME:
return {
...state,
teamsStatsWinHome: action.json,
isTeamsStatsLoading: false
};
case RECEIVE_TEAMS_STATS_WIN_AWAY:
return {
...state,
teamsStatsWinAway: action.json,
isTeamsStatsLoading: false
};
case RECEIVE_TEAMS_STATS_DRAW_HOME:
return {
...state,
teamsStatsDrawHome: action.json,
isTeamsStatsLoading: false
};
case RECEIVE_TEAMS_STATS_DRAW_AWAY:
return {
...state,
teamsStatsDrawAway: action.json,
isTeamsStatsLoading: false
};
case RECEIVE_TEAMS_STATS_LOSE_HOME:
return {
...state,
teamsStatsLoseHome: action.json,
isTeamsStatsLoading: false
};
case RECEIVE_TEAMS_STATS_LOSE_AWAY:
return {
...state,
teamsStatsLoseAway: action.json,
isTeamsStatsLoading: false
};
And here my action with the call request to the API endpoint这里是我对 API 端点的调用请求的操作
export function getTeamsStats(league, team) {
return function(dispatch) {
return axios
.get(
`https://www.api-football.com/demo/api/v2/statistics/${league}/${team}`
)
.then(res => {
let homewins = res.data.api.statistics.matchs.wins.home;
dispatch(receivedTeamsStatWinHome(homewins));
let awaywins = res.data.api.statistics.matchs.wins.away;
dispatch(receivedTeamsStatWinAway(awaywins));
let drawhome = res.data.api.statistics.matchs.draws.home;
dispatch(receivedTeamsStatDrawHome(drawhome));
let drawaway = res.data.api.statistics.matchs.draws.away;
dispatch(receivedTeamsStatDrawAway(drawaway));
let losehome = res.data.api.statistics.matchs.loses.home;
dispatch(receivedTeamsStatLoseHome(losehome));
let loseaway = res.data.api.statistics.matchs.loses.away;
dispatch(receivedTeamsStatLoseAway(loseaway));
})
.catch(e => {
console.log(e);
});
};
The funcion getTeamsStats
is then put in the fetchLeaguesList
to get the Sao Paulo result as example然后将
getTeamsStats
放入fetchLeaguesList
以获取圣保罗结果作为示例
This is the relevant code in my component Stats.js
这是我的组件
Stats.js
的相关代码
let Stats = ({
teamsStatsWinHome,
teamsStatsWinAway,
teamsStatsDrawHome,
teamsStatsDrawAway,
teamsStatsLoseHome,
teamsStatsLoseAway,
loading
}) => {
let stats = "";
if (
teamsStatsWinHome &&
teamsStatsWinAway &&
teamsStatsDrawHome &&
teamsStatsDrawAway &&
teamsStatsLoseHome &&
teamsStatsLoseAway
) {
stats = (
<div className="col-sm-6">
<div className="card detail-card border-0 rounded-0 bg-transparent">
<div className="card-body text-decoration-none text-secondary">
{JSON.stringify(teamsStatsWinHome)}
{JSON.stringify(teamsStatsWinAway)}
{JSON.stringify(teamsStatsDrawHome)}
{JSON.stringify(teamsStatsDrawAway)}
{JSON.stringify(teamsStatsLoseHome)}
{JSON.stringify(teamsStatsLoseAway)}
</div>
</div>
</div>
);
}
It works as expected, as you can see in the codesandbox demo but i do not know if i am doing in the right way with Redux states, call action and Component.它按预期工作,正如您在代码和框演示中看到的那样,但我不知道我是否以正确的方式使用 Redux 状态、调用操作和组件。
My question is , is it right?我的问题是,对吗? Can i make it better?
我能做得更好吗? If yes, how should i refactor?
如果是,我应该如何重构?
Any refactor and code changes in the codesandbox demo is good to accept the answer代码和盒子演示中的任何重构和代码更改都很好接受答案
Dispatch a single action to update the store for result instead of dispatching multiple actions per field in the result.调度单个操作来更新结果存储,而不是为结果中的每个字段调度多个操作。
src/actions/index.js源代码/操作/index.js
export const RECEIVE_TEAMS_STATS = "RECEIVE_TEAMS_STATS";
export const receivedTeamsStat = json => ({
type: RECEIVE_TEAMS_STATS,
json: json
});
export function getTeamsStats(league, team) {
return function(dispatch) {
return axios
.get(
`https://www.api-football.com/demo/api/v2/statistics/${league}/${team}`
)
.then(res => {
const {
wins: { home: teamsStatsWinHome, away: teamsStatsWinAway },
draws: { home: teamsStatsDrawHome, away: teamsStatsDrawAway },
loses: { home: teamsStatsLoseHome, away: teamsStatsLoseAway }
} = res.data.api.statistics.matchs;
const teamStats = {
teamsStatsWinHome,
teamsStatsWinAway,
teamsStatsDrawHome,
teamsStatsDrawAway,
teamsStatsLoseHome,
teamsStatsLoseAway
}
dispatch(receivedTeamsStat(teamStats));
})
.catch(e => {
console.log(e);
});
};
All 6 actions ( RECEIVE_TEAMS_STATS_WIN_HOME
, RECEIVE_TEAMS_STATS_WIN_AWAY
, RECEIVE_TEAMS_STATS_DRAW_HOME
, RECEIVE_TEAMS_STATS_DRAW_AWAY
, RECEIVE_TEAMS_STATS_LOSE_HOME
, RECEIVE_TEAMS_STATS_LOSE_AWAY
) can be rolled into a RECEIVE_TEAMS_STATS
action and handled as follows:所有 6 个动作(
RECEIVE_TEAMS_STATS_WIN_HOME
, RECEIVE_TEAMS_STATS_WIN_AWAY
, RECEIVE_TEAMS_STATS_DRAW_HOME
, RECEIVE_TEAMS_STATS_DRAW_AWAY
, RECEIVE_TEAMS_STATS_LOSE_HOME
, RECEIVE_TEAMS_STATS_LOSE_AWAY
RECEIVE_TEAMS_STATS
动作可以如下:
src/reducers/index.js src/reducers/index.js
import {
//..
RECEIVE_TEAMS_STATS
} from "../actions";
const reducer = (state = initialState, action) => {
switch (action.type) {
//...
case RECEIVE_TEAMS_STATS:
return {
...state,
...action.json,
isTeamsStatsLoading: false
};
//...
}
The benefit of dispatching a single update to the store is that Stats
component renders once as opposed to 6 times when results return from the API.将单个更新分派到 store 的好处是,当结果从 API 返回时,
Stats
组件呈现一次,而不是 6 次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.