https://github.com/hvish/redux-thaga
Redux middleware with the powers of redux-saga as well as redux-thunk
https://github.com/hvish/redux-thaga
Last synced: 12 months ago
JSON representation
Redux middleware with the powers of redux-saga as well as redux-thunk
- Host: GitHub
- URL: https://github.com/hvish/redux-thaga
- Owner: HVish
- Created: 2023-05-21T14:21:46.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-27T17:06:42.000Z (almost 3 years ago)
- Last Synced: 2025-07-14T17:19:26.326Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 309 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux thaga
This redux middleware enhances redux-saga with redux-thunk capabilites.
## Usage
```ts
// 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();
export const allTasksSelector = (state: { tasks: EntityState }) =>
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) {
taskAdapter.addOne(state, action.payload);
},
updateTask(state, action: PayloadAction>) {
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);
}
}
```
```ts
// 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);
```
```tsx
// 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 (
Fetch Tasks
{tasks.map((task) => (
{task.title}
))}
);
}
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.