实现Redux Action Creator在用户已登录时不派发Action

嘿，我明白你想优化那个“傻瓜式”的Action Creator，让它能根据用户登录状态智能判断要不要派发Action对吧？这事儿用Redux Thunk就能轻松搞定，我给你一步步讲清楚：

核心思路 #

要在Action Creator里访问Redux Store的状态，咱们得让它返回一个函数而不是普通对象——这就得靠Redux Thunk中间件帮忙了，它允许Action Creator执行异步逻辑或者条件判断，还能拿到dispatch和getState这两个关键方法。

步骤1：确保项目配置了Redux Thunk #

如果还没装，先安装：

npm install redux-thunk
# 或者用yarn
yarn add redux-thunk

然后在创建Store的时候把它作为中间件加上：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './你的reducer路径';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

要是你用的是Redux Toolkit，那更省心——它默认已经集成了Thunk，不用额外配置~

步骤2：修改Action Creator #

把原来的同步Action改成带条件判断的函数式Action：

export const toggleLoginModal = () => (dispatch, getState) => {
  // 从Store里取出用户登录状态，这里的路径要对应你实际的Store结构
  // 比如我假设登录状态存在`auth`切片下的`isLoggedIn`字段里
  const { auth: { isLoggedIn } } = getState();

  // 只有用户未登录时，才派发弹窗切换的Action
  if (!isLoggedIn) {
    dispatch({ type: "TOGGLE_LOGIN_MODAL" });
  }
  // 已登录的话就啥也不做，完美~
};

步骤3：容器组件不用改 #

你原来的connect写法完全没问题，Thunk会自动处理这个返回函数的Action Creator：

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

这样一来，当用户已经登录时，点击触发这个Action Creator的按钮，就不会再派发多余的Action了，完全符合你的需求！

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