@36node/redux-ui 中文文档教程

Question

Redux ui

Use

Config redux:

import { reduxUiReducers } from "@36node/redux-ui";

combineReducers({
  ...reduxUiReducers,
});

Assign

将任何值保存到 redux。

actions:

import { createAssignActions } from "@36node/redux-ui/assign";

const assignActions = createToggleActions("someKey");

// set action: set value
dispath(assignActions.set(someValue));

selector:

import { createAssignSelector } from "@36node/redux-ui/assign";

// selector maker
const selector = createAssignSelector("someKey");

const assign = selector(state).assign;

Toggle

打开或关闭切换到 redux。

actions:

import { createToggleActions } from "@36node/redux-ui/toggle";

const toggleActions =  createToggleActions("someKey"),

// open toggle action
dispath(toggleActions.open());

// close toggle action
dispath(toggleActions.close());

// set toggle action
dispath(toggleActions.set(true or false));

selector:

import { createToggleSelector } from "@36node/redux-ui/toggle";

// selector maker
const selector = createToggleSelector("someKey");

const toggle = selector(state).toggle;

Progress

在 redux 中表示一个进度逻辑。

actions:

import { createProgressActions } from "@36node/redux-ui/progress";

const progressActions = createProgressActions("someKeys");

// increase action, default step = 1
dispatch(progressActions.increase(5));
// decrease action, default step = 1
dispatch(progressActions.decrease(5));
// init action, default params: step = 1, min = 0, max = 100
dispatch(progressActions.init(1, 0, 100));

selector:

import { createProgressSelector } from "@36node/redux-ui/progress";

const selector = createProgressSelector("someKey");

// progressState: {step, min, max}
const progressState = selector(state);