reactjs - About the import method of redux saga

Question

I am a 2-month front end developer.

I studied React at the same time as I joined the company, so there are many parts I do not know well.

I am currently analyzing the code to proceed with code maintenance, but there is an esoteric part of the code.

First, In the saga, There is no part where the action function is imported. (even in the root saga.)

So, Is it possible to implicitly import in the code?

I'm attaching some of the code to help you understand.

rootSaga.js

import { all } from "redux-saga/effects";

import watcherLogin from "store/sagas/login";
import watcherSignUp from "store/sagas/signup";

export default function* rootSaga() {
  yield all([
    watcherLogin(),
    watcherSignUp(),
  ]);
}

watcherLogin() > index.js

export { default } from "./watcherLoginSaga"

watcherLogin() > watcherLoginSaga.js

import { all, put, fork, takeLatest } from "redux-saga/effects";
import Cookies from "universal-cookie";
import { fetchData } from "store/sagas/baseSaga";

function* onRequestLogin(action) {
  const payload = action.payload;
  const { history } = payload;
  const successAction = (res) => {

    const cookies = new Cookies();
    cookies.set("hdmKey", res.data, {
      path: "/",
      maxAge: 3600,
    });
    return function* () {

      const payload = res;
      yield put({
        type: "login/GET_USERINFO_REQUEST",
        payload: {
          method: "get",
          api: "getUserInfo",
          // token: res.data.key,
          history,
        },
      });
      yield put({
        type: "login/LOGIN_REQUEST_SUCCESS",
        payload,
      });
      yield put({
        type: "base/IS_LOGGED",
        payload,
      });
      yield history.push("/");
    };
  };
  const failureAction = (res) => {

    return function* () {

      yield put({
        type: "base/SHOW_MODAL",
        payload: {
          dark: true,
          modalName: "alert",
          modalContent: "login failure",
          modalStyle: "purpleGradientStyle",
          modalTitle: "Wait!",
        },
      });
    };
  };
  yield fork(fetchData, payload, successAction, failureAction);
}
...

export default function* watcherLoginSaga() {
  yield all([
    takeLatest("login/LOGIN_REQUEST", onRequestLogin),
  ]);
}

loginModule > index.js

export { default } from "./loginModule";

loginModule > loginModule.js

import createReducer from "store/createReducer";
import { changeStateDeep } from "lib/commonFunction";

export const types = {
  LOGIN_REQUEST: "login/LOGIN_REQUEST",
  LOGIN_REQUEST_SUCCESS: "login/LOGIN_REQUEST_SUCCESS",
  ...
};
export const actions = {
  loginRequest: (payload) => ({
    type: types.LOGIN_REQUEST,
    payload,
  }),
...
};
const INITIAL_STATE = {
  data: {
    isLogged: false,
    ...
  },
};
const reducer = createReducer(INITIAL_STATE, {

  [types.ON_LOGIN]: (state, action) => {
    state.data.isLogged = true;
  },
  [types.LOGIN_REQUEST_SUCCESS]: (state, action) => {
    state.data.isLogged = true;
    state.data.key = action.payload?.key || "key";
  },
...
});
export default reducer;

I would appreciate it if you could help even a little.

Answer 1

等待大神答复