live-store:基于redux和react hook封装的迷你状态管理器

  • n4_265753
    了解作者
  • 79.6KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 00:33
    上传日期
live-store With only one API, the mini state manager encapsulated by Redux and react hook can realize global / local state management 只用redux和react hook封装的迷你状态管理器,只用一个api,就能实现全局/局部状态管理 installation To install the stable version: npm install --save-dev live-store That's it! import createHookStore from 'live-store'; const useStore = createHookStore({reducer1,reducer2,...}); 注意: useStore relies on re
live-store-master.zip
  • live-store-master
  • .eslintrc.js
    2.1KB
  • webpack.config.js
    1.5KB
  • src
  • index.js
    1.4KB
  • README.md
    2.4KB
  • dist
  • index.min.js
    2.9KB
  • index.js
    7.9KB
  • .editorconfig
    232B
  • .gitignore
    78B
  • index.js
    157B
  • .eslintignore
    27B
  • webpack.loader.js
    749B
  • package-lock.json
    313.3KB
  • package.json
    1.9KB
内容介绍
# live-store #### With only one API, the mini state manager encapsulated by Redux and react hook can realize global / local state management #### 只用redux和react hook封装的迷你状态管理器,只用一个api,就能实现全局/局部状态管理 ## installation To install the stable version: ```sh npm install --save-dev live-store ``` That's it! ```js import createHookStore from 'live-store'; const useStore = createHookStore({reducer1,reducer2,...}); ``` ### 注意: useStore relies on react's effect subscription store, so it can't be used outside non hook components, There is no Provider injected into the store from the top level, and there is no connection around people, You have to accept using react hooks to develop your project useStore依赖了react的effect订阅store,所以不能在非hook组件外使用, 没有从顶层注入store的Provider,也没有绕人的connect.使用这个工具, 你必须接受使用react hooks来开发你的项目 ## Example ### project.js ```js //initstate const initState = { name: '华商金融城中心项目' }; //actions const actions = { update_project_name: 'update_project_name' }; //reducer export default (state = initState, action) => { switch (action.type) { case actions.update_project_name: state.name = action.name; break; } return Object.assign({}, state); }; ``` ### goods.js ```js //initstate const initState = { name: '苹果手机', num: 20 }; //actions const actions = { update_good_num: 'update_good_num' }; //reducer export default (state = initState, action) => { switch (action.type) { case actions.update_good_num: state.num = action.value; break; } return Object.assign({}, state); }; ``` ### store.js ```js import createHookStore from 'live-store'; //import reducer import project from './project'; import good from './goods'; //merge reducer const reducer = { project, good }; const useStore = createHookStore(reducer); //you can alias export const useCustomStore = useStore; ``` ```js import {getGoodsDataApi} from './api'; //app.js function App(){ const [state, dispatch] = useStore(); //or const [, dispatch] = useStore(); //or const [state] = useStore(); //async useEffect(() => { dispatch.async(getGoodsDataApi()); },[]); return <div>{state}</div>; } ReactDOM.render( <app / rel='nofollow' onclick='return false;'>,document.body ); ````
评论
    相关推荐
    • npm
      npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行单元测试 npm run test:unit 自定义配置 请参阅。
    • npm-max:NPM软件包
      最大NPM 该函数返回最大值 npm install
    • npm-exercises
      npm-exercises
    • npmTest:测试npm
      npmTest 测试npm
    • npm-lifecycle:npm生命周期脚本运行器
      npm v7发布后,将不建议使用此模块。 请不要绝对依赖它。 npm v7中使用的生命周期脚本运行程序是 。 请继续使用该模块。 npm-lifecycle 是一个独立的库,用于执行软件包的生命周期脚本。 它是从npm本身提取的,...
    • TSProjectDemo:npm ts
      TSProjectDemo:npm ts
    • npmd-install
      npmd 安装 从 npmd-resolve 树安装节点模块。 npm install - g npmd - resolve npmd - install npmd - resolve browserify | npmd - install 另外, 一个关键部分 执照 麻省理工学院
    • npm-cli-login
      npm-cli-login 允许您不使用STDIN,STDOUT登录到NPM。 在CI构建系统等地方使用。 还可以在〜/ .npmrc文件中创建/修改条目以进行身份​​验证。 安装 npm install -g npm-cli-login 使用-g标志通过CLI使用npm-cli-...
    • npm-practice
      npm-practice
    • npm:测试
      npm 测试