Redux thaga

This redux middleware enhances redux-saga with redux-thunk capabilites.

Usage

// file: reducer.ts
import {
  PayloadAction,
  Update,
  createEntityAdapter,
  createSlice,
  EntityState,
} from '@reduxjs/toolkit';
import { call, takeLatest } from 'redux-saga/effects';
import { createThagaAction } from 'redux-thaga';

export interface Task {
  id: string;
  title: string;
  isCompleted: boolean;
}

const taskAdapter = createEntityAdapter<Task>();

export const allTasksSelector = (state: { tasks: EntityState<Task> }) =>
  taskAdapter.getSelectors().selectAll(state.tasks);

const taskApi = async () => {
  const response = await fetch('/tasks.json');
  const tasks: Task[] = await response.json();
  return tasks;
};

export const fetchTasks = createThagaAction(
  'fetchTasks',
  function* fetchTasksWorker() { // arguments: (actionPayload, action, ...restArgs)
    const tasks = (yield call(taskApi)) as Task[];
    return tasks;
  }
);

export const { actions, reducer: tasksReducer } = createSlice({
  name: 'tasks',
  initialState: taskAdapter.getInitialState(),
  reducers: {
    addTask(state, action: PayloadAction<Task>) {
      taskAdapter.addOne(state, action.payload);
    },
    updateTask(state, action: PayloadAction<Update<Task>>) {
      taskAdapter.updateOne(state, action.payload);
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchTasks.finished, (state, action) => {
      taskAdapter.addMany(state, action.payload);
    });
  },
});

export function* tasksWorker() {
  try {
    yield takeLatest(fetchTasks, fetchTasks.worker);
  } catch (error) {
    console.log(error);
  }
}

// file: store.ts
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { createThagaMiddleware } from 'redux-thaga';

import { tasksWorker, tasksReducer } from './reducer';

const sagaMiddleware = createSagaMiddleware();
const thagaMiddleware = createThagaMiddleware();

export const store = configureStore({
  reducer: { tasks: tasksReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(sagaMiddleware, thagaMiddleware),
});

sagaMiddleware.run(tasksWorker);

// file: App.tsx
import { useDispatch, useSelector } from 'react-redux';
import { Task, allTasksSelector, fetchTasks } from './reducer';

function App() {
  const tasks = useSelector(allTasksSelector);
  const dispatch = useDispatch();

  const onClick = async () => {
    try {
      const tasks = (await dispatch(fetchTasks())) as unknown as Task[];
      console.log(tasks);
    } catch (error) {
      console.log('unable to fetch tasks');
    }
  };

  return (
    <div>
      <button onClick={onClick}>Fetch Tasks</button>
      {tasks.map((task) => (
        <div key={task.id}>{task.title}</div>
      ))}
    </div>
  );
}

export default App;

API

createThagaMiddleware()

Creates redux middleware.

createThagaAction(type, worker)

Creats a thaga action creator. It is a extended version of redux-toolkit's creationAction(). The action creator has following properties:

• type - string, used as action type.
• worker - a generator function, called when this action is dispatched. The first argument is the action's payload. Second argument is the redux action dispatched to trigger this worker. Rest arguments are other arguments passed from caller like takeLatest(action, worker, ...arg).

properties from createAction()

• type - action type
• match() - action matcher function
• toString() - override function, returns action type.

thaga properties

• worker - saga worker to be started upon the dispatch of the thaga
• finished - action generated by createAction(), called when worker is successfully executed.
• failed - action generated by createAction(), called when worker throws an unhandlled exception.
• cancelled - action generated by createAction(), called when worker is aborted like by takeLatest etc.