agiledigital / Typed Redux Saga
Licence: mit
An attempt to bring better TypeScript typing to redux-saga.
Stars: ✭ 170
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Typed Redux Saga
Redux Dynostore
These libraries provide tools for building dynamic Redux stores.
Stars: ✭ 123 (-27.65%)
Mutual labels: redux-saga
React Native Feature Boilerplate
Feature based Architecture for developing Scalable React Native Apps 🚀 using react, redux, sagas and hooks
Stars: ✭ 139 (-18.24%)
Mutual labels: redux-saga
React Express Blog Demo
🔥 React full stack+Express+Mongo implementation blog website tutorial 🌚
Stars: ✭ 1,857 (+992.35%)
Mutual labels: redux-saga
Reactnativetemplate
Our example of simple application using ReactNative and some recommendations
Stars: ✭ 127 (-25.29%)
Mutual labels: redux-saga
React Curd
【React全家桶入门系列文章项目】http://blog.csdn.net/awaw00/article/category/6692955
Stars: ✭ 137 (-19.41%)
Mutual labels: redux-saga
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (-19.41%)
Mutual labels: redux-saga
Redux Saga Testing
A no-brainer way of testing your Sagas
Stars: ✭ 150 (-11.76%)
Mutual labels: redux-saga
Redux Arena
Bundling reducers, actions, saga and react-component when using Redux
Stars: ✭ 129 (-24.12%)
Mutual labels: redux-saga
Sharejs
💻js小技巧、react、webpack、redux、javascript及其它前端干货,持续更新ing
Stars: ✭ 141 (-17.06%)
Mutual labels: redux-saga
Rnn Starter
🤹 Production-ready starter for your next React Native App! Powered by cli-rn, React Native Navigation, Expo, Reanimated 2, Notifications, Over-The-Air Updates, Mobx, Dark Mode, and Localization.
Stars: ✭ 127 (-25.29%)
Mutual labels: redux-saga
React Interview Questions
300+ React Interview Questions
Stars: ✭ 151 (-11.18%)
Mutual labels: redux-saga
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-31.76%)
Mutual labels: redux-saga
Real Estate App Ui
Real Estate Property Listing App Built With React Native
Stars: ✭ 139 (-18.24%)
Mutual labels: redux-saga
Redux Tower
Saga powered routing engine for Redux app.
Stars: ✭ 155 (-8.82%)
Mutual labels: redux-saga
Async Redux Saga
Just another approach to manage async operations using redux-saga
Stars: ✭ 149 (-12.35%)
Mutual labels: redux-saga
Typed Redux Saga
An attempt to bring better TypeScript typing to redux-saga.
Requires TypeScript 3.6 or later.
Installation
# yarn
yarn add typed-redux-saga
# npm
npm install typed-redux-saga
Usage
Let's take the example from https://redux-saga.js.org/#sagasjs
Before
import { call, all } from "redux-saga/effects";
// Let's assume Api.fetchUser() returns Promise<User>
// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
import Api from "...";
function* fetchUser(action) {
// `user` has type any
const user = yield call(Api.fetchUser, action.payload.userId);
...
}
function* fetchConfig() {}
// `result` has type any
const result = yield all({
api1: call(Api.fetchConfig1),
api2: call(Api.fetchConfig2),
});
...
}
After
// Note we import `call` from typed-redux-saga
import { call, all } from "typed-redux-saga";
// Let's assume Api.fetchUser() returns Promise<User>
// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
import Api from "...";
function* fetchUser(action) {
// Note yield is replaced with yield*
// `user` now has type User, not any!
const user = yield* call(Api.fetchUser, action.payload.userId);
...
}
function* fetchConfig() {}
// Note yield is replaced with yield*
// `result` now has type {api1: Config1, api2: Config2}
const result = yield* all({
api1: call(Api.fetchConfig1),
api2: call(Api.fetchConfig2),
});
...
}
Babel Macro
You can use the built-in babel macro that will take care of transforming all your effects to raw redux-saga effects.
Install the babel macros plugin:
yarn add --dev babel-plugin-macros
Modify your import names to use the macro:
import {call, race} from "typed-redux-saga/macro";
// And use the library normally
function* myEffect() {
yield* call(() => "foo");
}
The previous code will be transpiled at compile time to raw redux-saga effects:
import {call, race} from "redux-saga/effects";
function* myEffect() {
yield call(() => 'foo');
}
This gives you all the benefits of strong types during development without
the overhead induced by all the calls to typed-redux-saga
's proxies.
Credits
Thanks to all the contributors and especially thanks to @gilbsgilbs for his huge contribution.
See Also
- https://github.com/danielnixon/eslint-config-typed-fp
- https://github.com/danielnixon/eslint-plugin-total-functions
- https://github.com/danielnixon/readonly-types
- https://github.com/danielnixon/total-functions
- https://github.com/jonaskello/eslint-plugin-functional
- https://github.com/gcanti/fp-ts
- https://github.com/plantain-00/type-coverage
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].