Question

我有以下动作创建者：

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

我在我的容器上使用connect（）：

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

这是一个'哑'动作创建者 - 它总是返回相同的对象。我希望通过检查redux存储来检查用户是否已经登录，如果用户已登录，则不应该发送任何操作。

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

动作创作者是否有可能根本不发送动作？如果是这样，将如何将其纳入连接方法？

Answer 1

我看到它的方式，你有三个选择：

通过在组件中包装toggleLoginModal逻辑来阻止调用isLoggedIn
使用redux-thunk访问商店，可选择不dispatch采取行动
在你的减速机中处理这种逻辑，不过我可能会三思而后行。

示例：

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

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

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

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

    if (auth.isLoggedIn) {
      return;
    }

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

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

允许操作创建者不发送操作

1 个答案: