1 RN Thing a Day – Day 14: Predicate & Effect Patterns in React Native

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])
}