React/Redux Action中如何在内部函数访问外部变量？

这其实是个典型的JavaScript作用域+闭包问题，结合Redux action的写法，有两种简单直接的解决办法，我给你拆解一下：

方法一：给loadCartItems添加参数传递变量 #

既然你需要在loadCartItems的异步回调里用到外部的addedItems，最直接的方式就是把这个变量作为参数传给loadCartItems。修改后的代码如下：

修改loadCartItems函数 #

export function loadCartItems(addedItems) { // 新增addedItems参数
  return (dispatch, getState) => {
    dispatch({ type: types.LOAD_CART_PRODUCTS });
    return AsyncStorage.getItem(STORAGE_KEY_JWT_TOKEN).then((key) => {
      return API.getCartItems(key)
        .then((cartItems) => {
          // 这里可以直接访问传入的addedItems了
          const unaddedItems = cartItems.filter(item => !addedItems.includes(item.id));
          dispatch({ type: types.LOAD_CART_PRODUCTS_SUCCESS, payload: unaddedItems });
        })
        .catch((error) => {
          dispatch({ type: types.LOAD_CART_PRODUCTS_FAILURE, payload: error });
        });
    });
  };
}

在getUnaddedCartItems中调用时传入变量 #

export function getUnaddedCartItems() {
  return (dispatch, getState) => {
    // 从state中获取你需要的addedItems
    const addedItems = getState().yourReducerName.addedItems;
    // 调用loadCartItems时把addedItems传进去
    return dispatch(loadCartItems(addedItems));
  };
}

方法二：用高阶函数封装闭包（适合更复杂的场景） #

如果loadCartItems的逻辑需要复用，或者你不想直接修改它的参数列表，可以用高阶函数创建一个带闭包的action creator：

创建高阶函数 #

export function createLoadCartItems(addedItems) {
  return (dispatch, getState) => {
    dispatch({ type: types.LOAD_CART_PRODUCTS });
    return AsyncStorage.getItem(STORAGE_KEY_JWT_TOKEN).then((key) => {
      return API.getCartItems(key)
        .then((cartItems) => {
          // 闭包特性让这里能访问外层的addedItems
          const unaddedItems = cartItems.filter(item => !addedItems.includes(item.id));
          dispatch({ type: types.LOAD_CART_PRODUCTS_SUCCESS, payload: unaddedItems });
        })
        .catch((error) => {
          dispatch({ type: types.LOAD_CART_PRODUCTS_FAILURE, payload: error });
        });
    });
  };
}

在getUnaddedCartItems中使用 #

export function getUnaddedCartItems() {
  return (dispatch, getState) => {
    const addedItems = getState().yourReducerName.addedItems;
    // 调用高阶函数生成带闭包的action，再dispatch
    return dispatch(createLoadCartItems(addedItems));
  };
}

原理说明 #

JavaScript的闭包特性允许内部函数访问外层作用域的变量。不管是通过参数传递把addedItems带入loadCartItems的作用域，还是用高阶函数把addedItems封装在闭包里，本质都是让异步回调函数能访问到这个变量的引用，从而在回调执行时可以正常使用它。

内容的提问来源于stack exchange，提问作者FairyQueen