Foca NPM | npm.io

FOCA

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

mind map

特性

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

使用环境

Browser
React Native
Taro
Electron

安装

# npm
npm install foca
# yarn
yarn add foca
# pnpm
pnpm add foca

初始化

import { store } from 'foca';

store.init();

创建模型

reducers 修改数据

import { defineModel } from 'foca';

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

export const counterModel = defineModel('counter', {
  initialState,
  reducers: {
    // 支持无限参数
    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);
    },
  },
});

methods 组合逻辑

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

      this.increment();
      // 也可直接修改状态而不通过reducers，仅在内部使用
      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		当下最流行的请求库
foca-axios		axios 适配器，节流、缓存、重试

持久化存储引擎

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