1.rootSaga.js
import { fork, all } from "redux-saga/effects";
// import sub-sagas from submodules
import { assemblyLineSaga } from "@/routes/Devops/AssemblyLine/saga";
import { DashboardSaga } from "@/routes/Devops/Dashboard/saga";
export default function* rootSaga() {
yield all([...assemblyLineSaga, ...DashboardSaga]);
}
2.dashboard/actions.js
export const GET_ALLDATA_SRART = "GET_ALLDATA_SRART";
export const GET_ALLDATA_SUCCESS = "GET_ALLDATA_SUCCESS";
export const GET_ALLDATA_FAILED = "GET_ALLDATA_FAILED";
export function getAllList(payload) {
return {
type: GET_ALLDATA_SUCCESS,
payload
};
}3.dashboard/reducer.js
const initialState = {};
export default (state = initialState, action) => {
switch (action.type) {
case Actions.GET_ALLDATA_FAILED:
return state;
case Actions.GET_ALLDATA_SUCCESS:
return {
...state,
...action.payload
};
case Actions.GET_ALLDATA_FAILED:
return state;
default:
return state;
}
};
4.dashboard/saga.js
import { call, put, fork, takeLatest, takeEvery } from "redux-saga/effects";
import { getList } from "./service";
import * as Actions from "./actions";
function* getAllList() {
try {
yield put({
type: Actions.GET_ALLDATA_SRART,
});
const list = yield call(getList);
yield put({
type: Actions.GET_ALLDATA_SUCCESS,
payload: list
});
} catch (error) {
yield put({ type: Actions.GET_ALLDATA_FAILED, error });
}
}
export const DashboardSaga = [fork(getAllList)];
5.dashboard/service.js
import Http from "@/utils/http";
export const getList = () => {
return Http.get(
"https://api.github.com/search/repositories?q=javascript&sort=stars"
);
};
6.dashboard/view.js
import { connect } from "react-redux";
import { getAllList } from "./actions";
...
componentDidMount() {
this.props.getAllList()
}
export default connect(state => ({ state }), { getAllList })(Dashboard);
found that the order of calling action is dispatch "GET_ALLDATA_SRART" = > "GET_ALLDATA_SUCCESS" = > "GET_ALLDATA_SUCCESS" and the first "GET_ALLDATA_SUCCESS" returns payload is undefined.