如何将action分派到特定的reducer?

2024-04-22

我有多个减速器,每个减速器都有一个类型“INIT”。我想要实现的是,从触发动作的位置来看,只有相关的减速器才能接收该动作。有没有中间件可以做到这一点?


您在创建减速器时是否重复使用减速器逻辑?

你可以尝试这样的事情:-

function createCounterWithNamedType(counterName = '') {
    return function counter(state = 0, action) {
        switch (action.type) {
            case `INCREMENT_${counterName}`:
                return state + 1;
            case `DECREMENT_${counterName}`:
                return state - 1;
            default:
                return state;
        }
    }
}


const rootReducer = combineReducers({
    counterA : createCounterWithNamedType('A'),
    counterB : createCounterWithNamedType('B'),
    counterC : createCounterWithNamedType('C'),
});

store.dispatch({type : 'INCREMENT_B'});
console.log(store.getState());

这就是所谓的高阶减速器,您可以通过创建包装函数来使用相同的减速器逻辑,如上面的代码所示。

您可以查看有关高阶减速器的更多信息here https://redux.js.org/docs/recipes/reducers/ReusingReducerLogic.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将action分派到特定的reducer? 的相关文章

  • React router v4 - 如何访问通过重定向传递的状态?

    我正在 React 的帮助下制作一个登录页面 当登录成功时 该页面会重定向到另一个页面 让我将登录成功时渲染的组件称为 A 我想将从数据库获取的数据传递给组件 A 我通过将其传递到 重定向 组件的 状态 属性来实现此目的 但是 我不明白如何
  • 应用 API 响应转换的最佳位置 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在异步操作创建器中 我从服务器获取数据 对于我的用例来说 数据的格式不太好 我需要对其进行转换以在 UI 中使用它 问题 我应该 在数据到达后立
  • bindActionCreators 和 mapDispatchToProps - 我需要它们吗?

    我正在查看一个 React Redux 应用程序 并尝试了解一切是如何工作的 在其中一个组件中 我看到了以下几行代码 import bindActionCreators from redux function mapDispatchToPr
  • 如何在静态服务器上托管 ReactJS 项目

    我已经构建了一个 React 应用程序 它在本地服务器上运行良好 但是 当我运行 npm run build 时 该过程似乎正确执行 创建 build 文件夹 其中包含捆绑的 js 文件和 index html 文件 但是当我在浏览器中打开
  • 如何将action分派到特定的reducer?

    我有多个减速器 每个减速器都有一个类型 INIT 我想要实现的是 从触发动作的位置来看 只有相关的减速器才能接收该动作 有没有中间件可以做到这一点 您在创建减速器时是否重复使用减速器逻辑 你可以尝试这样的事情 function create
  • Reactjs中的递归函数

    我正在使用递归函数制作动态菜单 并且我已经制作了菜单并且它以正确的顺序显示 没有任何问题 我从以下位置收到菜单数据服务 js文件 您可以在下面的代码沙箱示例中看到整个工作应用程序 https codesandbox io s reactst
  • 未捕获的类型错误:提供您的根 Epic 来 createEpicMiddleware(rootEpic)

    我收到这个错误 未捕获的类型错误 将您的根 Epic 提供给createEpicMiddleware rootEpic 不再支持 而是使用epicMiddleware run rootEpic 简单使用时 import rxjs impor
  • 如何在类组件中使用react-redux useSelector?

    我是 React 新手 正在尝试学习 Redux 我想访问类中的存储 但它给了我一个错误 我不能在类中使用钩子 当我在函数中使用此代码时 正如我在 YouTube 教程中看到的那样 它可以正常工作 我在这里进入商店的柜台 function
  • 从React Redux中的package.json获取版本号(create-react-app)

    OP 编辑 如果其他人遇到此问题 该应用程序是使用创建的创建反应应用程序 https github com facebookincubator create react app 这限制导入到 src 文件夹内 但是如果你将react scr
  • 在严格模式下,一个对象字面量不能有多个同名属性

    这是我的代码 import combineReducers from redux import postReducers from postReducers import stationsReducer from TrackCircuitS
  • 如何在React Material UI简单输入中启用文件上传?

    我正在创建一个简单的表单来使用带有 redux 表单和材料 ui 的 electro react boilerplate 来上传文件 问题是我不知道如何创建输入文件字段 因为材料用户界面不支持上传文件输入 关于如何实现这一目标有什么想法吗
  • Redux - 从函数调用操作

    我正在尝试从函数调用 redux 操作 我调用该函数的组件已连接到商店 但是 如果我通过以下操作 它就不起作用 function myFunc action action 有没有办法通过参数传递动作 谢谢 using bindActionC
  • 如何将 Redux DevTools 扩展添加到我的 React-Redux 商店?

    我正在尝试将 Redux DevTools Chrome 扩展添加到我的 redux 商店 并在此处进行描述 http extension remotedev io http extension remotedev io 这是我的商店 le
  • React Hook“useSelector”在函数中被调用

    我无法弄清楚 useSelector 发生了什么 我需要一点帮助 ERROR React Hook useSelector 在函数 render user 中调用 该函数既不是 React 函数组件 也不是自定义 React Hook 函数
  • Redux如何处理reducer中的错误

    我不确定如何处理 redux 减速器中的错误 当我的 API 获取返回数据时 我需要转换其结构并检查结果数据上设置的各种属性 但是 我不能在减速器中抛出错误 因为 redux 至少需要返回之前的状态 我该如何处理这个问题 注意 我正在使用反
  • Typescript:如何在 Redux 中输入 Dispatch

    例如我想删除dispatch any here export const fetchAllAssets gt dispatch any gt dispatch actionGetAllAssets return fetchAll getPr
  • 可能未处理的 Promise 拒绝/错误:请求失败,状态代码 400

    我知道对此有一些答案 并且我全部阅读了它们 但他们都没有帮助 所以这是我的错误消息 这是我的行动 export function registerUser data const request axios method POST url R
  • Redux中如何处理关系数据?

    我正在创建的应用程序有很多实体和关系 数据库是关系型的 为了获得一个想法 有超过 25 个实体 它们之间具有任何类型的关系 一对多 多对多 该应用程序基于 React Redux 为了从商店获取数据 我们使用Reselect https g
  • 类型错误:Object(...) 不是react-redux 中的函数

    当我尝试在react redux 中 createStore 时 我收到了这个奇怪的错误 我不知道为什么 因为我之前在不同的应用程序中这样做过 但它工作得很好 TypeError Object is not a function src i
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐