Comments (10)
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!
from marks-dev-blog-comments.
Thanks for the quick response!
I spun up a simple RTK demo and await listenerApi.delay()
worked like a charm:
// throttle
listenerMiddleware.startListening({
actionCreator: addIncrement,
effect: async (action, listenerApi) => {
listenerApi.dispatch(increment())
listenerApi.unsubscribe()
await listenerApi.delay(500);
listenerApi.subscribe()
},
});
// debounce
listenerMiddleware.startListening({
actionCreator: addDecrement,
effect: async (action, listenerApi) => {
listenerApi.cancelActiveListeners()
await listenerApi.delay(500);
listenerApi.dispatch(decrement())
},
});
from marks-dev-blog-comments.
Great post as always! So glad to have this feature finally out there!
from marks-dev-blog-comments.
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
https://github.com/jeffbski/redux-logic
from marks-dev-blog-comments.
@Nubuck : yes, there's definitely a lot of overlap with redux-logic
here. However, that library is basically unmaintained at this point, and also has had major bundle size issues. (In fact, I filed an issue two years ago pointing out the bundle size problems, and never got a response: jeffbski/redux-logic#172 ). There's also a complete lack of TS examples or documentation.
We wanted something we could build into RTK itself, and redux-logic
simply was not a viable option here.
from marks-dev-blog-comments.
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 await listenerApi.job.delay(15)
followed by listenerApi.subscribe()
also be used to mimic throttling instead of setTimeout()
or is there a difference?
from marks-dev-blog-comments.
@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.
from marks-dev-blog-comments.
@janne-nylund awesome!
I'll certainly say that writing that isn't as obviously intuitive as a purposely-named throttle
or debounce
effect :) But we did want to keep the listener middleware API pretty simple on purpose, and it's great to see that the async primitives we provided were enough to build those. And honestly you could probably pull those out into a couple little helpers, like:
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?
from marks-dev-blog-comments.
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())
},
});
from marks-dev-blog-comments.
Hi again! I got some time to play with my listener demo again and started to type the throttle
& debounce
functions. This is what I have so far. Could the typing be improved?
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)
}
from marks-dev-blog-comments.
Related Issues (20)
- How Web Apps Work: AJAX, APIs, and Data Transfer HOT 4
- Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) HOT 31
- Coding Career Advice: Using Git for Version Control Effectively HOT 3
- Presentation: JavaScript for Java Devs HOT 1
- Practical Redux, Part 11: Nested Data and Trees HOT 6
- Coding Career Advice: Searching and Evaluating Online Information Efficiently HOT 2
- Presentations: Learn Modern Redux Livestream HOT 1
- Blogged Answers: A Comparison of Redux Batching Techniques HOT 1
- Codebase Conversion: Migrating a MEAN AngularJS app to React, Next.js, and TypeScript HOT 1
- Blogged Answers: React, Redux, and Context Behavior HOT 3
- Presentations: Intro to React, Redux, and TypeScript (2020) HOT 1
- How Web Apps Work: JavaScript and the DOM HOT 4
- Reactathon 2022: The Evolution of Redux Async Logic HOT 4
- Blogged Answers: How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries) HOT 1
- Presentations: Modern Redux with Redux Toolkit
- Blogged Answers: The Evolution of Redux Testing Approaches HOT 1
- Presentations: 2022 Podcasts
- Blogged Answers: My Experience Modernizing Packages to ESM HOT 10
- Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from marks-dev-blog-comments.