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

然后，如果您发现自己需要重复这种类型的解决方案，那么您可以找到上面提到的其中一个库。

React Native + Redux：在哪里为第三方库添加函数？

1 个答案: