Using UnknownAction in Redux-Saga

Provide an example of how to use UnknownAction in a Redux-Saga to reset saga state or cancel running sagas.

const RESET_ACTION_TYPE = 'RESET_SAGA_STATE';

function* resetSagaState() {
  // logic to reset state or perform cleanup
}

function* watchResetAction() {
  while (true) {
    const action = yield take('*');
    // Check if the dispatched action is unknown
    if (action.type === RESET_ACTION_TYPE) {
      yield call(resetSagaState);
      // Optionally, cancel any other running sagas
      // yield cancel(runningSagaTask);
    }
  }
}

export default function* rootSaga() {
  // Fork other sagas here if necessary
  // const runningSagaTask = yield fork(otherSagas);
  yield fork(watchResetAction);
}

This code defines a special 'RESET_SAGA_STATE' action type and a saga named 'resetSagaState' which is responsible for resetting the saga state. The 'watchResetAction' saga watches for all actions taken by the Redux store, and if it encounters the 'RESET_SAGA_STATE' action, it triggers the 'resetSagaState' logic. You can uncomment the 'yield cancel' line to cancel any specific running saga tasks as needed. The 'rootSaga' function forks 'watchResetAction', and it would also fork other sagas if necessary.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

// Define the initial redux state
const initialState = {};

// Define a simple reducer that handles the reset action
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case RESET_ACTION_TYPE:
      return initialState;
    // Handle other actions
    default:
      return state;
  }
};

// Create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// Create the Redux store with the reducer and middleware
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

// Then run the rootSaga
sagaMiddleware.run(rootSaga);

This code creates a Redux store with a 'rootReducer' that knows how to handle the 'RESET_ACTION_TYPE' by resetting the state to the initial state. A saga middleware is created and applied to the store, and the 'rootSaga' is then run with the saga middleware to initialize the sagas (including the reset action watcher).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redux Saga Reset Example</title>
<script src="path/to/your/compiled/javascript.js"></script>
</head>
<body>
  <button id="reset-state">Reset Saga State</button>
  <script>
    document.getElementById('reset-state').addEventListener('click', function() {
      // Dispatch reset action to the Redux store
      store.dispatch({ type: RESET_ACTION_TYPE });
    });
  </script>
</body>
</html>

This HTML code provides a simple user interface with a 'Reset Saga State' button. When this button is clicked, it dispatches the 'RESET_ACTION_TYPE' action to the Redux store, which the sagas are watching for, to reset the saga state.

/* Include this CSS in your project to style the reset button. */

#reset-state {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

This CSS snippet provides some styling for the 'Reset Saga State' button, setting up background color, padding, font size, and other visual properties.