{"_id":"@cjy0208/redux-module","_rev":"1-cf26e5bfe1901287ebe2015f8d8b5dce","name":"@cjy0208/redux-module","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cjy0208/redux-module","version":"1.0.0","description":"Make Redux more like vuex","main":"index.js","scripts":{"build":"rollup --config"},"repository":{"type":"git","url":"git+https://github.com/CJY0208/redux-module.git"},"keywords":["redux","vuex"],"author":{"name":"CJY0208"},"license":"ISC","bugs":{"url":"https://github.com/CJY0208/redux-module/issues"},"homepage":"https://github.com/CJY0208/redux-module#readme","peerDependencies":{"react":">=15"},"dependencies":{"hoist-non-react-statics":"^2.5.0"},"devDependencies":{"babel-core":"^6.26.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-export-extensions":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","rollup":"^0.61.2","rollup-plugin-babel":"^3.0.5","rollup-plugin-commonjs":"^9.1.6","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-uglify":"^4.0.0"},"gitHead":"da7f90bd4571990d1fc38557205327c6afd1249a","_id":"@cjy0208/redux-module@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"cjy0208","email":"fanluan058@gmail.com"},"dist":{"integrity":"sha512-wWfhZ9EjxanUeUJaOpZd9si8OvVj1SkyP2QPGlfNudJ1/ZqYes9fhOWHGInqeU13ADsH3wkoWpYWMdCl80SHUg==","shasum":"3e7ff8dcb163efe858ef3b6c5d9936cf34d35abb","tarball":"https://registry.npmjs.org/@cjy0208/redux-module/-/redux-module-1.0.0.tgz","fileCount":18,"unpackedSize":86857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbijKTCRA9TVsSAnZWagAARSAQAJc7UmbRnRSmEYouuSTD\n1ZrnFkJMPVX74vrKLHNBYB646Wv4Nc2PZQbSWgDlPEBHsYeHeWqCJ+VqxfLk\nVRWNtNg2M/2kwITM3u5dkxCnz8Y+RatNO6jbAGL0Y4KGi97Bf7sC0knTMUJS\nMgeD6DSsDreeC3YElmpOp34R8oEFBmvm/5pRZhZ33unzgfnmwap6wSLwcQFT\nw1CmppIG2xjbmh86uc9CuHTcVHS/eAhQwSJBizT/Mom0SL/2b4FPpRHYSi7i\n75CEZktVqgJjHSNZWnYGGnw9QDiXi5s8vGEwmBL0Kq6JMv8vUS76/FZW8V1D\nMbpEt0UCfE1qM8DnzWAqQ2HFxJXuPdPLalRLX2gwQ+QP0HboMGFYMrnp+Y/g\nioFNccE31H6UVmtW68novkAlc5WGX8W4Iv1Y3PqSBp6OmmdgvDIAmjcDWgWN\nnwP5mNitZKN/CNJxUVjbMahgsKXqFPQJNnifTcfXNxDSeX6kJl2BB2gE4R5k\ni1JM84AOUHhWznU8EPzsKFkgt1jqPeAsJ7rvwefi8w5nSZIpnZnp+D3b5frK\nDcVlwGXGo7wjamapsXp87/zUUv48GC9Wmnk/A6PE34VgIip9CPLLEdpOOwdE\nr9ASpsBB95htgLCi9y3CChW4Nx6dDgSlY+KAzuEkWTzrrWTWCk4Eg7XCJefs\nnpew\r\n=bwx8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCua4WFPuVUgy0a+h5DbvOrgIGCxjEGqym21f0hrUiKAiEAtnKJ1JAtWnIMlia8AghmJsLWQA9T02RMbcSisfClay0="}]},"maintainers":[{"name":"cjy0208","email":"fanluan058@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/redux-module_1.0.0_1535783570765_0.20474222515058949"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-01T06:32:50.600Z","1.0.0":"2018-09-01T06:32:50.962Z","modified":"2022-04-04T23:09:45.011Z"},"maintainers":[{"name":"cjy0208","email":"fanluan058@gmail.com"}],"description":"Make Redux more like vuex","homepage":"https://github.com/CJY0208/redux-module#readme","keywords":["redux","vuex"],"repository":{"type":"git","url":"git+https://github.com/CJY0208/redux-module.git"},"author":{"name":"CJY0208"},"bugs":{"url":"https://github.com/CJY0208/redux-module/issues"},"license":"ISC","readme":"# redux-module\r\n\r\n一个让 redux 写起来像 vuex 一样简单的轮子\r\n\r\n## 使用方法\r\n\r\n```javascript\r\n// ......\r\n// module.js\r\nimport { createModule } from '@cjy0208/redux-module'\r\n\r\nconst delay = time => new Promise(resolve => setTimeout(resolve, time))\r\n\r\nconst reduxModule = createModule({\r\n  name: 'main',\r\n  state: {\r\n    counter: 0,\r\n    text: ''\r\n  },\r\n  actions: ({\r\n    commit, // commit 为原 redux 的 dispatch\r\n    dispatch, // dispatch 只触发到动作层\r\n    getState, // 获取当前 module 的 state\r\n    getReduxState, // 获取整个 redux store 的 state\r\n    getModules // 获取其他 module 以进行模块间通信\r\n  }) => ({\r\n    counter: {\r\n      add: (amount = 1) => commit('add', amount),\r\n      reduce: (amount = 1) => commit('reduce', -1 * amount)\r\n    },\r\n    // 将异步控制从 redux 中拆离，异步操作不依赖其他中间件\r\n    text: async text => {\r\n      await delay(1000)\r\n      commit('text', text)\r\n      await delay(2000)\r\n      commit('add', 1) // 同一个 action 可以 commit 多次\r\n    }\r\n  }),\r\n  mutations: ({ combine }) => ({\r\n    // 变化响应可以合并，类似 redux-actions 的 combineActions\r\n    [combine('add', 'reduce')]: ({ counter }, amount) => ({\r\n      counter: counter + amount\r\n    }),\r\n    text: (state, text) => ({ text })\r\n  }),\r\n  // 允许衍生状态\r\n  getters: {\r\n    text: state => `computed::${state.text}`\r\n  }\r\n})\r\n\r\nexport default reduxModule\r\n\r\n// ......\r\n// store.js\r\nimport { createStore, applyMiddleware, compose, combineReducers } from 'redux'\r\nimport reduxModule from './module.js'\r\n\r\nconst store = createStore(reduxModule.reducer)\r\n\r\nexport default store\r\n\r\n// ......\r\n// app.js\r\nimport React, { Component } from 'react'\r\nimport { connectModules } from '@cjy0208/redux-module'\r\n\r\n@connectModules(({ main }) => ({\r\n  main\r\n}))\r\nexport default class App extends Component {\r\n  render() {\r\n    const { main } = this.props\r\n\r\n    return (\r\n      <div>\r\n        Home\r\n        <div>\r\n          module counter is: {main.state.counter}\r\n          <button onClick={() => main.dispatch('counter/add')}>add</button>\r\n          <button onClick={() => main.dispatch('counter/reduce')}>\r\n            reduce\r\n          </button>\r\n        </div>\r\n        \r\n        <input onChange={e => {\r\n          const value = e.target.value\r\n          main.commit('text', value) // 允许直接 commit\r\n        }} />\r\n        <input onChange={e => {\r\n          const value = e.target.value\r\n          main.dispatch('text', value)\r\n        }} />\r\n        <div>main text is: {main.state.text}</div>\r\n        <div>main getters.text is: {main.getters.text}</div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\n// ......\r\n// index.js\r\nimport React from 'react'\r\nimport { render } from 'react-dom'\r\nimport { ModuleProvider } from '@cjy0208/redux-module'\r\nimport App from './app.js'\r\nimport store from './store'\r\n\r\nrender(\r\n  <ModuleProvider {...{ store }}>\r\n    <App />\r\n  </ModuleProvider>,\r\n  document.getElementById('app')\r\n)\r\n\r\n```","readmeFilename":"README.md"}