时间戳

首页 > 解决方案 > 使动作创建者不分派动作

reactjs - 使动作创建者不分派动作

问题描述

我有以下动作创建者：

export const toggleLoginModal = () => {
  return {
    type: "TOGGLE_LOGIN_MODAL",
  };
};

我在我的容器上使用它连接（）：

export default connect(null, {toggleLoginModal})(MyComp);

这是一个“愚蠢”的动作创建者——它总是返回相同的对象。我希望它通过检查 redux 存储来检查用户是否已经登录，如果用户已登录，它根本不应该调度任何操作。

我想过在动作创建者中返回一个空值，但我认为这是不好的做法......此外，返回一个意味着“忽略此动作”的动作似乎也不正确......

动作创建者是否有可能根本不分派动作？如果是这样，这将如何合并到 connect 方法中？

标签： reactjsredux

解决方案

在我看来，你有三个选择：

  1. 通过将逻辑toggleLoginModal包装在组件中来防止调用isLoggedIn
  2. 使用redux-thunk以访问商店，并且可以选择根本不dispatch执行任何操作
  3. 在你的 reducer 中处理这种逻辑，尽管我可能会三思而后行。

例子：

示例 1：假设您可以通过查看状态来判断用户是否已登录

class MyComp extends Component {
  render () {
    return (
      <div>
        {!this.props.isLoggedIn && <button onClick={() => toggleLoginModal()}>Toggle</button>}
      </div>
    );
  }
}

示例 2：使用redux-thunk中间件，假设您有一个authreducer 或类似的东西。

function toggleLoginModal () {
  return (dispatch, getState) => {
    const { auth } = getState();

    if (auth.isLoggedIn) {
      return;
    }

    dispatch({
      type: "TOGGLE_LOGIN_MODAL",
    });
  };
}

如果这符合您的要求，我会完全隐藏按钮（示例 1）。

推荐阅读