The easiest way to think about it is:
Predicate = Watch for something
Effect = Do something when it happens
Example:
predicate: Is someone entering the building?
effect: Check their ID
Example 1: Add Item To Cart
// cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
interface Product {
id: string
name: string
}
interface CartState {
items: Product[]
}
const initialState: CartState = {
items: []
}
const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
addItem: (state, action: PayloadAction<Product>) => {
state.items.push(action.payload)
},
removeItem: (state, action: PayloadAction<string>) => {
state.items = state.items.filter(
item => item.id !== action.payload
)
}
}
})
export const { addItem, removeItem } = cartSlice.actions
export default cartSlice.reducer
// listenerMiddleware.ts
import { createListenerMiddleware } from '@reduxjs/toolkit'
import Toast from 'react-native-toast-message'
export const listenerMiddleware =
createListenerMiddleware()
// cartListeners.ts
import { listenerMiddleware } from './listenerMiddleware'
listenerMiddleware.startListening({
predicate: (_, currentState, previousState) => {
return (
currentState.cart.items.length >
previousState.cart.items.length
)
},
effect: async () => {
Toast.show({
type: 'success',
text1: 'Item added to cart'
})
}
})
Why use a predicate instead of listening to addItem directly?
You could do:
listenerMiddleware.startListening({
actionCreator: addItem,
effect: () => {
Toast.show({
type: 'success',
text1: 'Item added to cart'
})
}
})
But the predicate version is more powerful because it reacts to state changes, not specific actions.
The predicate doesn't know or care which action happened. It only cares about the resulting state.
For example, if items are added by:
dispatch(addItem(product))
dispatch(syncCartFromServer())
dispatch(restoreSavedCart())
the same predicate still works:
currentState.cart.items.length >
previousState.cart.items.length
because it only cares that the cart grew, regardless of which action caused it. That's the main strength of the Predicate & Effect pattern.
Why Compare Current State and Previous State?
Because many actions happen in the app.
For example: User adds item to cart
Without comparing states, your effect might run every time.
Instead, the predicate asks:
Did the specific thing I care about change?
Only then does it execute the effect.
When should I use actionCreator?
Use it when your business rule is: "When this action happens, do something."
Examples:
Track Login Event
startListening({
actionCreator: loginSuccess,
effect: () => {
Analytics.track('Login')
}
})
You specifically want to react to the login action.
When should I use predicate?
Use it when your business rule is:"When the state becomes this, do something."
Examples:
User Became Logged In
predicate: (_, current, previous) =>
!previous.app.isLoggedIn &&
current.app.isLoggedIn
Maybe several actions can lead to a logged-in state:
loginSuccess()
restoreSession()
refreshTokenSuccess()
You don't want to listen to all of them.
You just care that: isLoggedIn changed from false to true
Why not just use useEffect?
For small apps, useEffect is often enough. Predicate & Effect becomes valuable when you want to move business logic outside the UI layer.
The Problem With useEffect
Imagine this: When a user logs in, you need to:
Fetch profile
Load permissions
Connect websocket
Start analytics session
Many developers write:
function HomeScreen() {
const isLoggedIn = useSelector(selectIsLoggedIn)
useEffect(() => {
if (isLoggedIn) {
dispatch(fetchProfile())
dispatch(loadPermissions())
connectWebSocket()
startAnalytics()
}
}, [isLoggedIn])
}
Now ask yourself:
Why is HomeScreen responsible for login behavior?
It isn't really a UI concern.
It's application behavior.
The app should perform these actions whenever a user becomes logged in, regardless of which screen is mounted.
This is where Predicate & Effect shines.
Simple Rule
Use useEffect when:
The effect belongs to the component.
Examples:
- Focus input
- Start animation
- Listen to keyboard
- Set navigation title
- Fetch data only for this screen
Use Predicate & Effect when:
The effect belongs to the application.
Examples:
- User logged in
- User logged out
- Network restored
- Language changed
- Permissions updated
- Token expired
- Cart became non-empty
- Analytics tracking
- Background synchronization