GithubHelp home page GithubHelp logo

foca-js / foca Goto Github PK

View Code? Open in Web Editor NEW
255.0 255.0 30.0 2.72 MB

流畅的React状态管理库

Home Page: http://foca.js.org

License: MIT License

TypeScript 100.00%
react-redux react-state-management redux redux-model redux-toolkit redux-typescript

foca's People

Contributors

bluewaitor avatar fwh1990 avatar geekact avatar lgtm-migrator avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

foca's Issues

多个loading的情况

是我用法有问题吗?报错 .room is not a function

model.getItem(id).room(id).excute(id)

关于持久化的版本号

1、如何升级版本号,比如我使用 localforage 作为引擎,似乎文档中没有更详细的说明。
2、如果升级了版本号是清空所有开启持久化的模型还是只清空某个模型?

watch特性

自从computed特性上线后并不断完善后,watch特性也在准备了。

computed和watch的不同点在于触发方式,computed是用的时候才计算,属于被动式,而watch是一旦依赖变化就要及时地主动触发。

目前有以下几种方案:

defineModel('test', {
  watch: {

    // 方案一:自动收集依赖,缺点是为了收集依赖,第一次必须执行
    test1() {
      document.title =  this.state.x.y.z;
    },

    // 方案二:手动收集依赖,缺点是修改业务的时候容易漏掉,而且字符串没有提示容易写错,增加了心智负担
    test2: {
      call() {
        document.title =  this.state.x.y.z;
      },
      deps: ['x.y.z'],
      immediate: false,
    },

    // 方案三:类似二,但是deps不再是字符串,能稍微减轻一点负担。
    test3: {
      call() {
        document.title =  this.state.x.y.z;
      },
      deps() {
        return [this.state.x.y.z];
      },
      immediate: false,
    },

  }
});

不完美的方案,用起来不爽,所以还得再发酵一段时间。

支持react18

发现react@18在北京时间2022.03.30发布,所以接下来会持续关注 react-redux 和 redux 的升级进度并集成到foca中。支持react18后,我将发布 [email protected]

另说明一下,@fwh1990 这个账号不用了,现在正式使用新账号。后续开源新项目也将会更加谨慎(尽量不开源不推广了)。

谁在使用foca?

开源,但是没精力推广。主要是一没有大厂光环,二没有写软文实力,三下班回家要带娃。对于foca这个框架,不管是写法还是TS类型提示,都能让一个程序员的心智负担降到极低的程度,需要掌握的api极少,总之就是毫无节操地提升开发效率。这也许不是最好的状态管理库,但已经尽我所能了。

如果你用foca时没有爽到起飞的感觉,那就是我的失职!这时强烈推荐你选择其他更香的状态库:
mobx, rematch, dva, redux-toolkit, concent, mirror, xstate...

和这些库的优劣对比啥的就不写了,咱也不得罪人,百花齐放才利于交流和进步。

如果你正在使用,请在此签个到~

持久化没有把initvalue放进去

持久化插件,只有在状态变更的时候才会触发,期望把initvalue在oninit 的时候就放在缓存里,如果不放在缓存里可能有一些预期的错误

next.js报错

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/linzeguang/Desktop/yyz/my-app/node_modules/foca/es/model/defineModel' imported from /Users/linzeguang/Desktop/yyz/my-app/node_modules/foca/es/index.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/linzeguang/Desktop/yyz/my-app/node_modules/foca/es/model/defineModel' imported from /Users/linzeguang/Desktop/yyz/my-app/node_modules/foca/es/index.js
at new NodeError (internal/errors.js:322:7)
at finalizeResolution (internal/modules/esm/resolve.js:318:11)
at moduleResolve (internal/modules/esm/resolve.js:776:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:887:11)
at Loader.resolve (internal/modules/esm/loader.js:89:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
at ModuleWrap. (internal/modules/esm/module_job.js:76:40)
at link (internal/modules/esm/module_job.js:75:36) {
code: 'ERR_MODULE_NOT_FOUND',
page: '/'
}

actions,异步actions, reducer, methods, computed, watch 名称叫法

effects这个词,给我的感觉更多是副作用,类似watch监听导致的watchEffect,或者是useEffect产生的副作用。如果watch特性上线,应该给effect换名的。
我的提议是把异步action放到actions,不知道判断一下返回值为Promise可不可以实现。

给点建议

可以把reselect 接入进去,会带来更好的优化

initialState参数很多,如何一次性setState更新?

目前做法是这样的,感觉多余代码太多了。求指教

export const Model = defineModel("global", {
initialState: {
account: "",
currentEnv: "",
license: "",
loginStatus: false,
pwd: "",
rememberPwdFlag: false,
system: "",
userInfo: {} as UserInfoSuccessPayload,
},
actions: {
// 重置
reset() {
return this.initialState;
},
// 设置登录状态
setLoginStatus(state, status) {
state.loginStatus = status;
},
// 设置当前环境
setCurrentEnv(state, env) {
state.currentEnv = env;
},
// 设置账号
setAccount(state, account: string) {
state.account = account;
},
// 设置密码
setPwd(state, pwd: string) {
state.pwd = pwd;
},
// 设置是否记住密码
setRememberPwdFlag(state, rememberPwdFlag) {
state.rememberPwdFlag = rememberPwdFlag;
},
// 设置系统
setSystem(state, system) {
state.system = system;
},
// 设置用户信息
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
},
},
});

如何动态删除指定的缓存?

if (process.env.NODE_ENV !== 'production') {
middleware.push(
createLogger({
collapsed: true,
diff: true,
duration: true,
logErrors: true,
}),
)
}

store.init({
compose: 'redux-devtools',
middleware,
persist: [
{
version: 1,
key: home-${process.env.NODE_ENV},
maxAge: 60 * 60 * 1000,
engine: taroStorage,
models: [homeModel],
},
{
version: 1,
key: cate-${process.env.NODE_ENV},
maxAge: 60 * 60 * 1000,
engine: taroStorage,
models: [cateModel],
},
],
})

我想在homeModel中监控到有新数据时, 动态更新 home-${process.env.NODE_ENV} 这个Key的缓存, 请问怎么样在 homeModel 中实现?

[New Feature]是不是可以增加一个即用即创建的功能

Pinia在这方面的处理是,只有 需要使用model的组件 mount时,才会创建对应的model,onInit才会触发。
如果使用较多的model,在根部一开始就创建,直接占用了较高的内存。
假设有10个Model,现在App一启动,10个onInit同时都会触发。

即用即创建,由于用户视口有限,同时在线的model的数量是很少的。

我的想法是getModel(userModel).state.name,可以替代userModel.state.name
在getModel、useModel 时,同步创建对应的store。

foca 2.0 规划

  • react最低要求版本升级到 18
  • 测试框架切换到vitest #35
  • jsx标签转译后使用react/jsx-runtime创建 #34
  • 删除actionseffects两个废弃属性
  • 不再兼容IE

可能的新特性

  • SSR方案
  • 按需创建reducer,已经完成,但是仍在思考 #33

[Improvement] reset的特性无需深拷贝

//defineModel.ts
  modelStore.appendReducer(
    uniqueName,
    createReducer({
      name: uniqueName,
---  initialState: parseState(initialStateStr),
+++ initialState: options.initialState,
      allowRefresh: !skipRefresh,
    }),
  );

js里没有完美的深拷贝,reset这个不太应该从拷贝的角度考虑🤔
我感觉有immer的存在,初始的options.initialState完全不会改变,
或许和pinia一样,改为函数,这样也不需要再存一份旧state了

state(){
   return {
       a:1,
       b:2
   }
}

有办法删除Model吗?

如题,很多情况下页面切换后,之前的Model已经不用了(或者说重新进入我希望创建新的Model)
这种场景下Model能卸载掉吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.