一每日事一 – 第十四日：React Native中谓词与效应模式

思之易也，曰：

谓词谨候其至

效遇事则为之

例：

predicate: Is someone entering the building?
effect: Check their ID

例一：添物于车

// 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'
    })
  }
})

何故用谓语，不直听addItem乎？
尔可为之：

listenerMiddleware.startListening({
  actionCreator: addItem,
  effect: () => {
    Toast.show({
      type: 'success',
      text1: 'Item added to cart'
    })
  }
})

然谓词版更胜，盖因其应状态之变，非特应行也。

谓词不识亦不问何事为之，惟重其果。

譬如，若物品由之增入：

dispatch(addItem(product))
dispatch(syncCartFromServer())
dispatch(restoreSavedCart())

同谓仍效。

currentState.cart.items.length >
previousState.cart.items.length

盖其唯念车之增，不论何行致之。此谓谓词之长处也。& 效应之模态也.

何故较今昔之状？
盖因多事于应用间.

For example: User adds item to cart

不较其状，则效应每动.

然，其谓问曰：

Did the specific thing I care about change?

惟其如是，乃行其效.

当何时用 actionCreator？
当尔之商律为："此行此动，则为之事。"

例：


Track Login Event
startListening({
  actionCreator: loginSuccess,
  effect: () => {
    Analytics.track('Login')
  }
})

尔特欲应于登录之动.

当何时用 predicate？
当尔之商规若是：“其境至是，则为之事。”

例：

User Became Logged In
predicate: (_, current, previous) =>
  !previous.app.isLoggedIn &&
  current.app.isLoggedIn

或数事可致登录之境：

loginSuccess()
restoreSession()
refreshTokenSuccess()

尔不欲悉听之。

尔所顾者：isLoggedIn自假变真耳

何不径用useEffect乎

小应用者，useEffect往往足矣。谓&效验之用，当尔欲移商理于UI层外时方显其贵

useEffect之弊
试想此情：用户既登录，尔需：

索履
载權
接WebSocket
啟分析會

眾多開發者云：

function HomeScreen() {
  const isLoggedIn = useSelector(selectIsLoggedIn)

  useEffect(() => {
    if (isLoggedIn) {
      dispatch(fetchProfile())
      dispatch(loadPermissions())
      connectWebSocket()
      startAnalytics()
    }
  }, [isLoggedIn])
}

今自問：

為何主屏幕司理登入之舉？

此實非視面之務。

此乃应用之行止.

凡用户登录，无论何屏呈现，应用皆当行此诸事.

此即谓谓词与效彰显之域.

简易之则

当用useEffect者：

其效属组件.

例证：

专注输入
启动动画
聆听键盘
设定导航标题
仅获取此界面数据

使用谓词与效果，当
此效果属应用范畴.

示例：

用户已登录
用户已登出
网络已恢复
言语异矣
权限已更新
令牌已过期
车非空矣
分析追踪
背景同步

推薦訂閱源

DEV Community