FOCA

流畅的 react 状态管理库，基于redux和react-redux。简洁、极致、高效。

特性

模块化开发，导出即可使用
专注 TS 极致体验，100%类型提示
内置 immer 响应式修改数据
支持 computed 计算属性，自动收集依赖
支持私有方法
自动管理异步函数的 loading 状态
可定制的多引擎数据持久化

缺陷

不支持 SSR

使用环境

现代化浏览器
React Native
Taro
Electron
IE (配合 polyfills)

IE	Edge	Chrome	Firefox	Safari	iOS Safari	Opera
10+	12+	45+	34+	9+	9+	32+

安装

# 如果是 yarn
yarn add foca

# 如果是 npm
npm install foca

初始化

import { store } from 'foca';

store.init();

创建模型

actions 修改数据

import { defineModel } from 'foca';

const initialState: { count: number } = { count: 0 };

export const counterModel = defineModel('counter', {
  initialState,
  actions: {
    // 支持无限参数
    plus(state, value: number, times: number = 1) {
      state.count += value * times;
    },
    minus(state, value: number) {
      return { count: state.count - value };
    },
  },
});

computed 计算属性

export const counterModel = defineModel('counter', {
  initialState,
  // 自动收集依赖
  computed: {
    filled() {
      return Array(this.state.count)
        .fill('')
        .map((_, index) => index)
        .map((item) => item * 2);
    },
  },
});

effects 副作用

export const counterModel = defineModel('counter', {
  initialState,
  actions: {
    increment(state) {
      state.count += 1;
    },
  },
  effects: {
    async incrementAsync() {
      await this._sleep(100);

      this.increment();
      // 也可直接修改状态而不通过actions，仅在内部使用
      this.setState({ count: this.state.count + 1 });
      this.setState((state) => {
        state.count += 1;
      });

      return 'OK';
    },
    // 私有方法，外部使用时不会提示该方法
    _sleep(duration: number) {
      return new Promise((resolve) => {
        setTimeout(resolve, duration);
      });
    },
  },
});

events 事件回调

export const counterModel = defineModel('counter', {
  initialState,
  events: {
    // 模型初始化
    onInit() {
      console.log(this.state);
    },
    // 模型数据变更
    onChange(prevState, nextState) {},
  },
});

使用

在 function 组件中使用

import { FC, useEffect } from 'react';
import { useModel, useLoading } from 'foca';
import { counterModel } from './counterModel';

const App: FC = () => {
  const count = useModel(counterModel, (state) => state.count);
  const loading = useLoading(counterModel.incrementAsync);

  useEffect(() => {
    counterModel.incrementAsync();
  }, []);

  return (
    <div onClick={() => counterModel.plus(1)}>
      {count} {loading ? 'Loading...' : null}
    </div>
  );
};

export default App;

在 class 组件中使用

import { Component } from 'react';
import { connect, getLoading } from 'foca';
import { counterModel } from './counterModel';

type Props = ReturnType<typeof mapStateToProps>;

class App extends Component<Props> {
  componentDidMount() {
    counterModel.incrementAsync();
  }

  render() {
    const { count, loading } = this.props;

    return (
      <div onClick={() => counterModel.plus(1)}>
        {count} {loading ? 'Loading...' : null}
      </div>
    );
  }
}

const mapStateToProps = () => {
  return {
    count: counterModel.state.count,
    loading: getLoading(counterModel.incrementAsync),
  };
};

export default connect(mapStateToProps)(App);

文档

https://foca.js.org

例子

沙盒在线试玩：https://codesandbox.io/s/foca-demos-e8rh3
React 案例仓库：https://github.com/foca-js/foca-demo-web
RN 案例仓库：https://github.com/foca-js/foca-demo-react-native
Taro 案例仓库：https://github.com/foca-js/foca-demo-taro

生态

网络请求

仓库	描述	平台
axios	当下最流行的请求库	React, RN
foca-axios	axios 适配器，节流、缓存、重试	React, RN
foca-miniprogram-axios	axios 适配器，节流、缓存、重试	Taro

存储引擎

仓库	描述	平台
react-native-async-storage	React-Native 持久化引擎	RN
foca-taro-storage	Taro 持久化引擎	Taro
localforage	浏览器端持久化引擎，支持 IndexedDB, WebSQL	React
foca-cookie-storage	Cookie 持久化引擎	React