React Native + Redux:在哪里放置第三方库的函数

Question

我正在创建一个使用地理位置库（https://github.com/transistorsoft/react-native-background-geolocation）的电子商务应用程序。

我有一个orderState：

const ordersInitState = {
  lineItems: [],
  status: ORDER_STATUSES.AWAITING_CHECKOUT,
};
const ordersReducer = (prevState=ordersInitState, action) => {
  switch(action.type) {
    ...
    case actions.ORDERS.REMOVE_ITEM:
      const lineItems = [...prevState.lineItems];
      const indexToRemove = action.payload;
      lineItems.splice(indexToRemove, 1);
      const status = lineItems.length > 0 ? prevState.status : ORDER_STATUSES.AWAITING_CHECKOUT;
      return {
        ...prevState,
        status,
        lineItems,
      };
    default:
      return prevState;
  }
}
export default ordersReducer;

如您所见，允许客户从购物车中删除商品。如果他们最终删除了所有内容，他们的订单状态将重置。如果他们最终清空了购物车（lineItems.length === 0），我还想从地理位置库中运行一条简单的行：

BackgroundGeolocation.removeGeofence("blah");

我会把它放在哪里？在减速器中这样做感觉不对，因为它与状态无关。它也不是特定于一个特定的组件，因此将其放在我的一个组件中没有意义。

我对 redux 仍然有点陌生，所以我不确定在哪里放置与状态无关的方法。

Answer 1

您正在寻找的内容的常用名称称为"副作用"中间件。抽象地说，您希望在应用程序状态更改时在外部系统（在本例中为地理位置库）中产生影响。

此用例有许多库。一些比较流行的是redux-saga和redux-loop。它们都是很好的工具，有助于为管理复杂的副作用提供结构，但两者都有很大的概念开销，并且应该只在真正需要时才使用。

如果你想要一个快速简单的解决方案，你可以创建一个普通的JavaScript模块，subscribe你的商店更改并为你执行副作用：

import store from '../your/redux/store;
let previousCount = 0;
store.subscribe(() => {
  const count = store.getState().orders.lineItems.length;
  if (count === 0 && previousCount > 0) {
    // someone just emptied the cart, so execute side-effect
    BackgroundGeolocation.removeGeofence("blah");
  }  
  previousCount = count;
});  

然后，如果您发现自己反复需要这种类型的解决方案，则可以使用上述库之一。