-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Idiomatic Redux: Designing the Redux Toolkit Listener Middleware #51
Comments
Great post as always! So glad to have this feature finally out there! |
Really awesome article, Mark. I thoroughly enjoyed the writeup, really awesome to see all the twists and turns this took you through. This is something me and my colleague were complaining about and wishing for. Days later, 1.8 was released. Great work again! |
Redux logic has done all this and more for years already, with the ability to work with both pre-reducer guards and post-reducer effects however you like sync, async and observables etc. Truly the most influential project I rely on. All this seems like alot of work to mimic a fraction of its power |
@Nubuck : yes, there's definitely a lot of overlap with We wanted something we could build into RTK itself, and |
Firstly, thank you for your excellent work with Redux Toolkit! I'm dipping my toes into the listener middleware (I hate TS with sagas...), and I have a question regarding the effectScenarios examples. Could |
@janne-nylund : possibly? :) Haven't thought about that in a while. I would think that you could, but I couldn't tell you off the top of my head what the exact sequence should be to make that happen. |
Thanks for the quick response! I spun up a simple RTK demo and
|
@janne-nylund awesome! I'll certainly say that writing that isn't as obviously intuitive as a purposely-named async function throttle(listenerApi, timeout) {
listenerApi.unsubscribe()
await listenerApi.delay(timeout);
listenerApi.subscribe()
}
async function debounce(listenerApi, timeout) {
listenerApi.cancelActiveListeners()
await listenerApi.delay(timeout);
} In fact, now that I say that... maybe what we ought to do is take these and the other relevant examples from that effects test file, and paste them into a docs section showing how to do these? |
Good suggestion! This absolutely looks much cleaner: const throttle = async (listenerApi, timeout, work) => {
listenerApi.dispatch(work)
listenerApi.unsubscribe()
await listenerApi.delay(timeout);
listenerApi.subscribe()
}
const debounce = async (listenerApi, timeout, work) => {
listenerApi.cancelActiveListeners()
await listenerApi.delay(timeout);
listenerApi.dispatch(work)
}
listenerMiddleware.startListening({
actionCreator: addIncrement,
effect: async (action, listenerApi) => {
await throttle(listenerApi, 1000, increment())
},
});
listenerMiddleware.startListening({
actionCreator: addDecrement,
effect: async (action, listenerApi) => {
await debounce(listenerApi, 1000, decrement())
},
}); |
Hi again! I got some time to play with my listener demo again and started to type the import { AnyAction, ListenerEffectAPI } from '@reduxjs/toolkit';
import { AppDispatch, RootState } from './store'
type AppListenerApi = ListenerEffectAPI<RootState, AppDispatch>;
interface IListenerHelper {
(
listenerApi: AppListenerApi,
timeout: number,
work: AnyAction
) : Promise<void>
}
export const throttle: IListenerHelper = async ( listenerApi, timeout, work ) => {
listenerApi.dispatch(work);
listenerApi.unsubscribe();
await listenerApi.delay(timeout);
listenerApi.subscribe();
}
export const debounce: IListenerHelper = async ( listenerApi, timeout, work ) => {
listenerApi.cancelActiveListeners()
await listenerApi.delay(timeout);
listenerApi.dispatch(work)
} |
Idiomatic Redux: Designing the Redux Toolkit Listener Middleware · Mark's Dev Blog
https://blog.isquaredsoftware.com/2022/03/designing-rtk-listener-middleware/
The text was updated successfully, but these errors were encountered: