时间戳

首页 > 解决方案 > Redux Toolkit - Slice 实用方法

node.js - Redux Toolkit - Slice 实用方法

问题描述

我正在使用 redux-toolkit 构建一个 React 应用程序，并且我正在使用 redux-toolkit 的帮助函数createSlice将我的商店分成一些切片。

这是一个简单的用例：

const sidebar = createSlice({
    name: "sidebar",
    initialState:
    {
        menus: {},      // Keep track of menus states (guid <-> open/close)
        visible: true
    },
    reducers:
    {
        show(state, action)
        {
            state.visible = action.payload.visible;
        },
        setMenuOpen(state, action)
        {
            const { id, open } = action.payload;
            state.menus[id] = open;
            return state;
        }
    }
});
export default sidebar;

一切正常，直到我将操作（更改存储）“添加”到切片，但考虑您的团队正在寻找实用功能“getMenuOpen”：此方法不会更改存储（它不是操作，不能添加到减速器目的）。您当然可以直接从存储中读取数据 (state.menus[<your_id>])，但考虑一个更复杂的示例，其中操作数据需要一些库导入、更复杂的代码等...我想模块化/隐藏每一片尽可能的多。

实际上我正在使用这种解决方法：

const sidebar = createSlice({ /* Same previous code... */ });

sidebar.methods =
{
    getMenuOpen: (state, id) => state.menus[id]
};

export default sidebar;

上面的代码允许从组件导入切片，mapStateToProps 到 redux 存储，并像这样调用实用函数getMenuOpen：

import sidebar from "./Sidebar.slice";

// Component declaration ...

const mapStateToProps = state => ({
    sidebar: state.ui.layout.sidebar,
    getMenuOpen(id)
    {
        return sidebar.methods.getMenuOpen(this.sidebar, id);
    }
});

const mapDispatchToProps = dispatch => ({
    setMenuOpen: (id, open) => dispatch(sidebar.actions.setMenuOpen({id, open}))
});

丑陋的部分是我需要将切片节点（this.sidebar）作为 getMenuOpen 的第一个参数注入，因为它不是从 redux-toolkit 自动映射的（对于带有 reducers/actions 的操作）。

所以我的问题是：如何清理我的解决方法以便自动映射商店的实用功能？createSlice似乎不支持这一点，但也许一些内部 redux 的 api 可以帮助我将我的“slice.methods”自动映射到商店。

谢谢

标签： node.jsreactjsreact-reduxredux-toolkit

解决方案

推荐阅读