@equinor/聚变-可观测

反应状态管理公用设施基于RxJS和Immer for Fusion Framework应用程序. 提供由动作驱动、可观察的国家容器(FlowSubject),动作创建器,还原器构建器,RxJS操作器,以及用于订阅可观测状态的回放钩.

特征

• 流程对象 ——一个可观测到的状态容器,通过一个还原器处理动作,类似于Redux,但与RxJS完全反应.
• 创建缩小器 利用Immer动力发作的变异和建筑型式的API(addCase, (中文(简体) ), addMatcher, (中文(简体) ), addDefaultCase) (中文(简体) ).
• 创建动作/ 创建同步动作 ——具有可选有效载荷准备的型号安全动作制造厂,包括主动请求/成功/失败模式.
• 创建状态 - 装有电线的便利工厂 FlowSubject,动作定义,和发送函数在一个呼叫.
• RxJS 运算符 —— 说 filterAction, (中文(简体) ), mapAction, (中文(简体) ), switchMapAction, (中文(简体) ), mapProp 简洁的动作流转换.
• 反应钩 —— 说 useObservable, (中文(简体) ), useObservableState, (中文(简体) ), useObservableSelector, (中文(简体) ), useObservableEffect, (中文(简体) ), useObservableFlow, (中文(简体) ), useDebounce还有更多.
• 工具函数 —— 说 isObservableInput 财务报告和审定财务报表 toObservable 用于将多种输入类型规范化为RxJS可观测.

安装

pnpm add @equinor/fusion-observable

使用量

创建状态容器

import { createAction, createReducer, FlowSubject } from '@equinor/fusion-observable';

// Define actions
const increment = createAction<number>('increment');
const decrement = createAction<number>('decrement');

// Build a reducer with Immer support
const reducer = createReducer({ count: 0 }, (builder) =>
  builder
    .addCase(increment, (state, action) => { state.count += action.payload; })
    .addCase(decrement, (state, action) => { state.count -= action.payload; }),
);

// Create the observable state container
const counter = new FlowSubject(reducer);
counter.subscribe((state) => console.log('Count:', state.count));
counter.next(increment(1)); // Count: 1
counter.next(increment(5)); // Count: 6

使用 createState 快速设置

import { createState, createAction } from '@equinor/fusion-observable';

const actions = {
  setName: createAction<string>('setName'),
};

const { subject, dispatch } = createState(actions, {
  initial: { name: '' },
  builder: (builder, actions) => {
    builder.addCase(actions.setName, (state, action) => {
      state.name = action.payload;
    });
  },
});

dispatch.setName('Alice');
console.log(subject.value); // { name: 'Alice' }

同步动作

import { createAsyncAction, isSuccessAction, isFailureAction } from '@equinor/fusion-observable';

const fetchUser = createAsyncAction(
  'fetchUser',
  (id: string) => ({ payload: { id } }),
  (user: User) => ({ payload: user }),
  (error: Error) => ({ payload: error }),
);

// fetchUser('123')           → { type: 'fetchUser::request', payload: { id: '123' } }
// fetchUser.success(user)    → { type: 'fetchUser::success', payload: user }
// fetchUser.failure(error)   → { type: 'fetchUser::failure', payload: error }

使输入与 toObservable

import { toObservable } from '@equinor/fusion-observable';

// Works with values, promises, functions, iterables, and observables
toObservable(42).subscribe(console.log);                        // 42
toObservable(Promise.resolve('hello')).subscribe(console.log);  // 'hello'
toObservable(() => 'computed').subscribe(console.log);           // 'computed'

反应钩

import { useObservable, useObservableState } from '@equinor/fusion-observable/react';

function Counter() {
  const subject = useObservable(reducer, { count: 0 });
  const { value } = useObservableState(subject);

  return (
    <div>
      <p>Count: {value.count}</p>
      <button onClick={() => subject.next(increment(1))}>+1</button>
    </div>
  );
}

RxJS 运算符

import { filterAction, mapAction, switchMapAction } from '@equinor/fusion-observable/operators';

// Filter to specific actions
action$.pipe(filterAction('increment')).subscribe(handleIncrement);

// Filter + map in one step
action$.pipe(mapAction('fetchSuccess', (a) => a.payload.data)).subscribe(setData);

// Filter + switchMap for async flows
action$.pipe(switchMapAction('search', (a) => fetchResults(a.payload))).subscribe(setResults);

API 参考

核心项目@equinor/fusion-observable(中文(简体) )

运算符( O)@equinor/fusion-observable/operators(中文(简体) )

反应钩子( R)@equinor/fusion-observable/react(中文(简体) )

行动( E)@equinor/fusion-observable/actions(中文(简体) )

再出口行动类型, ActionError,以及只需要动作层的消费者的动作创造工具.