@acpaas-ui/js-redux-utils 中文文档教程

Question

ACPaaS UI JS Redux Utils

Redux Utils 包提供了一些帮助程序和引导实用程序来简化 redux 设置。

## Installation

NPM

npm install @acpaas-ui/js-redux-utils --save

Yarn

yarn add @acpaas-ui/js-redux-utils

## Import

// ES2015
import { progressReducer } from '@acpaas-ui/js-redux-utils';

## Higher Order Reducers (HOR)

有 3 个 HOR 可用：progress、basicType 和 target。 这些 HOR 需要使用 combineReducers 才能工作。

progress

进度 HOR 将状态包装在一个详细说明数据状态的对象中：

{
    loading: true/false,
    created: 'Thu Feb 15 2018 13:36:31 GMT+0100 (CET)',
    lastUpdated: 'Thu Feb 15 2018 13:36:31 GMT+0100 (CET)',
    error: 'Custom error',
    result: {
        id: 'my-item'
    }
}

您可以通过在操作中提供 loading 标志或 err 消息来更新状态：

{
    type: 'DO_STUFF',
    loading: true/false,
    err: 'Something went wrong'
}

通过包装您的减速器，您可以控制 result 中存储的内容，而不必担心加载状态。 您只需提供一个类型和一个 reducer 函数：

const myReducer = (state, action) => {
    if (action.type === 'STUFF_LOAD') {
        return {
            ...state,
            stuff: action.stuff
        };
    }

    return state;
};

const progressReducer = progress('STUFF', myReducer);

progressReducer 只会触发以您提供的类型开头的操作。 我们通过尾部斜杠 / 使用命名空间：

type = 'ARTICLES';

'ARTICLES/LOAD' will match
'ARTICLES/LOAD' will match
'ARTICLES/PAGE' will match
'NEWS_ARTICLES' will not match
'ARTICLES_LOAD' will not match
'ARTICLE/LOAD' will not match

basicType

在许多应用程序中，有类似的数据类型需要最少的功能：

• load an item
• load multiple items
• append new items to the stored items
• clear an item/items

为了避免大量copy pasta redux-utils 包提供了一个非常基本的 HOR 来处理这个用例。

只需提供一个类型（默认为 BASIC_DEFAULT）和一个（可选的）初始值：

const newsReducer = basicType({
    type: 'NEWS'
}, null);

现在您可以使用您作为命名空间提供的类型调度操作来更新新闻类型：

dispatch({
    type: 'NEWS/LOAD',              // <TYPE>/LOAD
    data: {                         // will always look for a 'data' property
        id: '1',
        title: 'How cool is this?'
    }
});

Data types

默认情况下 basicType HOR 将假定您正在处理单个项目。 如果您需要处理数组，请将 dataType 选项设置为 list：

const newsReducer = basicType({
    type: 'NEWS',
    dataType: 'list',
}, []);

现在您可以使用相同的 LOAD 操作来设置状态：

dispatch({
    type: 'NEWS/LOAD',
    data: [{
        id: '1',
        title: 'How cool is this?'
    }]
});

或使用LOAD_MORE 操作将新项目附加到状态：

dispatch({
    type: 'NEWS/LOAD_MORE',
    data: [{
        id: '2',
        title: 'Need more content.'
    }]
});

注意： 当您对单个 数据类型调用LOAD_MORE 操作时，reducer 将回退到LOAD 操作，覆盖状态。

Progress

您可以通过在设置中将 progress 设置为 true 来使用 progress HOR：

const newsReducer = basicType({
    type: 'NEWS',
    dataType: 'list',
    progress: true,
}, []);

您仍然可以调度 loading 和 < code>error 状态相同：

dispatch({
    type: 'NEWS/LOAD',
    loading: true,
});

target

目标 reducer 将提供的 reducer 的结果存储在 store 中。 这样，您可以重用 reducer 逻辑，而无需管理额外的复杂层。

{
    filters: {
        search: {...},
        home: {...},
        users: {...}
    }
}

targetReducer 需要一个 type、reducer 和可选

const filterReducer = targetReducer({ type: 'FILTERS' }, myFilterReducer, {});

的 initialState 来工作： type将是使用操作类型验证的命名空间。

Updating a target

您可以通过在分派操作上设置 target 属性来更新目标：

dispatch({
    type: 'FILTERS/LOAD',
    target: 'search',
    filters: [...],
});

状态将相应更新：

{
    filters: {
        search: [...]
    }
}

Progress

您可以通过设置 progress< 将目标包装在 progressReducer 中/code> 到设置中的 true：

const filterReducer = targetReducer({
    type: 'FILTERS',
    progress: true
}, myFilterReducer, {});

现在您可以像以前一样发送 loading 和 error 状态：

dispatch({
    type: 'FILTERS/LOAD',
    loading: true,
    target: "search"
});

状态将相应更新：

{
    filters: {
        search: {
            loading: true,
            error: null,
            result: null,
            ...
        }
    }
}