Redux Saga не запускается при отправке типа действия - PullRequest
Новая
       103

Redux Saga не запускается при отправке типа действия

0 голосов
/ 20 июня 2020

Я реализовал Redux-saga впервые. Я следовал документации, чтобы создать сагу.

Проблема в том, что Saga не запускается при отправке типа действия. Позвольте мне немного уточнить. У меня есть файл saga. js, который содержит сагу наблюдателя и рабочего. root -сага. js просто объединяет все различные саги. Файл store. js содержит код установки basi c для конфигурации для саг.

Я отправляю тип действия при вызове useEffect в компоненте. Инструмент redux dev показывает, что тип действия вызывается правильно. Пожалуйста, взгляните на код.

Ожидаемый результат - сага должна автоматически вызываться при отправке функции типа действия. Должны быть показаны соответствующие журналы консоли.

Редактировать 1: добавлен код определений действий

// сохранить. js

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer from './reducers/root-reducer';
import rootSaga from './sagas/root-saga';

const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware];

const store = createStore(
  rootReducer,
  compose(
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(...middlewares)
  )
);

sagaMiddleware.run(rootSaga);

export default store;

// root - saga. js

import { all, call } from 'redux-saga/effects';

import { dashboardSagas } from './dashboard-sagas';

function* rootSaga() {
  yield all([call(dashboardSagas)]);
}

export default rootSaga;

// saga. js page 

import { takeLatest, put, call, all } from 'redux-saga/effects';
import axios from 'axios';

import { DASHBAORD } from '../types/dashboard';
import { DashboardSuccess, DashboardFail } from '../actions/dashboard';
import { APIS_ENDPOINTS } from '../../util/api-endpoints';

// watcher saga

export function* fetchDashboardSaga() {
  yield takeLatest(DASHBAORD.START, fetchDashboardAsyncSaga);
}

// worker saga

function* fetchDashboardAsyncSaga() {
  yield console.log('123');
  try {
    const resp = yield axios.get(APIS_ENDPOINTS.DASHBOARD);
    yield console.log(resp);
    yield put(DashboardSuccess(resp));
  } catch (error) {
    console.log(error);
    yield put(DashboardFail('Something went wrong. Please try again'));
  }
}


export function* dashboardSagas() {
  yield all([call(fetchDashboardSaga)]);
}

// app. js

import { dashboardStart } from './redux/actions/dashboard';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(dashboardStart());
  }, [dispatch]);
  return (
    // some dom
  );
}

// Действие определение 

import { DASHBAORD } from '../types/dashboard';

const dashboardStart = () => {
  return {
    type: DASHBAORD.START,
  };
};

const DashboardSuccess = (param) => {
  return {
    type: DASHBAORD.SUCCESS,
    payload: param,
  };
};

const DashboardFail = (param) => {
  return {
    type: DASHBAORD.FAILED,
    payload: param,
  };
};

export { dashboardStart, DashboardSuccess, DashboardFail };

Спасибо

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Я нашел проблему. Был какой-то странный сбой с функцией compose в магазине. js для redux. Я удалил это и установил библиотеку redux-devtools-extension. Сейчас работает нормально. 

   // before
   compose(
     window.__REDUX_DEVTOOLS_EXTENSION__ &&
       window.__REDUX_DEVTOOLS_EXTENSION__(),
     applyMiddleware(...middlewares)
   )

   // after
   composeWithDevTools(applyMiddleware(...middlewares))
0 голосов
/ 20 июня 2020

Если действия отправлены правильно, то проблема заключается в регистрации ваших саг. Попробуйте заменить этот блок кода 

function* rootSaga() {
  yield all([call(dashboardSagas)]);
}

на: 

function* rootSaga() {
  yield all([
   // manually call the sagas. Only watcher functions. example: 
   dashboardSagas.saga1(), 
   dashboardSagas.saga2() 
  ]);
}
...