redux-saga 多次触发action的问题？

Question

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);

发现调用action的顺序为 dispatch "GET_ALLDATA_SRART" => "GET_ALLDATA_SUCCESS" => "GET_ALLDATA_SUCCESS" 并且第一个 "GET_ALLDATA_SUCCESS" 返回的是payload是undefined.

Answer 1

。。乱的不行，

componentDidMount() {
  this.props.getAllList()
}

这个东西你把它去掉你会发现"GET_ALLDATA_SRART" => "GET_ALLDATA_SUCCESS" 还是会执行。

先理一理思路再来写吧。

（dashboard/actions.js）里getAllList 返回的action应该是GET_ALLDATA_SRART, 然后你（dashboard/saga.js）getAllList 的 try catch里面就不要执行GET_ALLDATA_SRART 了，你要做的是用takeLatest 或 takeEvery监听GET_ALLDATA_SRART这个type的action去执行你的getAllList事件

---

start 不是 srart，还有你没必要把函数名都设置成一样的把，这么多getAllList看着都晕。