{"_id":"@cond/redux-inject-reducer-and-saga","_rev":"1-c7ff0a6a80356fa435dabae4cd2136d6","name":"@cond/redux-inject-reducer-and-saga","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cond/redux-inject-reducer-and-saga","version":"1.0.0","description":"Inject reducer and saga anywhere in the application.","main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/marcelmokos/redux-inject-reducer-and-saga.git"},"author":{"name":"Marcel Mokoš","url":"https://github.com/marcelmokos"},"keywords":["react","redux","store","create store","injectable store","reducer","create reducer","inject","inject reducer","inject saga","inject redux-saga","inject thunk","inject redux-thunk"],"license":"MIT","engines":{"node":">=6"},"scripts":{"flow:update":"flow-typed update","flow":"flow --show-all-errors","flow:coverage":"flow coverage ./src/index.js --color && flow-coverage-report -i 'src/**/*.js' -x 'src/**/*.test.js' -x 'src/**/*.spec.js' -t html","test":"jest","test:watch":"yarn test --watch","test:update":"yarn test --update","test:coverage":"jest /src/ --coverage --verbose --silent --runInBand","test:changed":"yarn test --onlyChanged --passWithNoTests --silent --runInBand","test:dist":"npm run prepublishOnly && jest /dist/ --coverage","coveralls":"cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","lint":"eslint . --cache","lint:fix":"yarn lint --fix","lint:staged":"eslint --fix --max-warnings=0","precommit":"lint-staged && yarn test:changed","prepush":"yarn test && yarn test:dist","size":"size-limit","size:why":"size-limit --why","clean":"rimraf dist coverage","build":"BABEL_ENV=production babel src --out-dir dist --copy-files -p","prepublishOnly":"npm run clean && npm run build && npm run size","release-patch":"npm version patch -m \"Upgrade to %s\" && npm publish","release-minor":"npm version minor -m \"Upgrade to %s\" && npm publish","release-major":"npm version major -m \"Upgrade to %s\" && npm publish"},"size-limit":[{"path":"dist/index.js","limit":"50 KB"}],"lint-staged":{"*.{js,jsx}":["yarn run lint:staged","git add"],"*.{json,css,scss,less}":["prettier --write","git add"]},"peerDependencies":{"history":"^4.7.2","lodash":"^4.15.0-0","prop-types":"^15.6.0-0","react":"^16.3.0-0","react-dom":"^16.3.0-0","react-redux":"^5.0.0-0","react-router-dom":"^4.3.0","redux":"^3.0.0 || ^4.0.0-0","redux-immutable":"^4.0.0-0","redux-saga":"^0.16.0","redux-thunk":"^2.3.0"},"dependencies":{"history":"^4.7.2","hoist-non-react-statics":"^3.0.1","invariant":"^2.2.4","react-router-redux":"5.0.0-alpha.8"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react-app":"^3.1.2","coveralls":"^3.0.2","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.4","eslint":"^5.2.0","eslint-config-with-prettier":"^4.2.0","flow-bin":"^0.77.0","flow-coverage-report":"^0.7.0","flow-typed":"^2.5.1","husky":"^0.14.3","immutable":"^4.0.0-rc.9","jest":"^23.4.2","lint-staged":"^7.2.0","lodash":"^4.17.10","prettier":"^1.14.0","prop-types":"^15.6.2","raf":"^3.4.0","react":"^16.4.1","react-dom":"^16.4.1","react-redux":"^5.0.7","react-router-dom":"^4.3.1","react-saga":"^0.2.6","react-test-renderer":"^16.4.1","redux":"^4.0.0","redux-immutable":"^4.0.0","redux-saga":"^0.16.0","redux-thunk":"^2.3.0","rimraf":"^2.6.2","size-limit":"^0.19.0"},"gitHead":"7062409d4dce8a12ee0fcaec2f9a207adb8aedb2","bugs":{"url":"https://github.com/marcelmokos/redux-inject-reducer-and-saga/issues"},"homepage":"https://github.com/marcelmokos/redux-inject-reducer-and-saga#readme","_id":"@cond/redux-inject-reducer-and-saga@1.0.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-iSDp26EjQc5xcj4B45O1voBFJ831uk2qHd1HKlE2iZCfBY7WlSo3jQJ89/wSCeD6dpdW8whYqeRXag7JAq5T6g==","shasum":"965cebcf2c6986390565bd88a66c1c6bd2933f97","tarball":"https://registry.npmjs.org/@cond/redux-inject-reducer-and-saga/-/redux-inject-reducer-and-saga-1.0.0.tgz","fileCount":47,"unpackedSize":99246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetxwcCRA9TVsSAnZWagAANQAP+wcz9UkqSrP6+UDz8Pl5\nDJZE0dqt903Q/UINqB7VlHnHzq39GqL1fhSPi90MbB26hTssDznwI2lOoIIS\nisPmw3vN62h3D5YxUtzCMhB5HIy7CMbA4CQj0cu7EwWg3B4BpNSPBq0Vpf/5\nanyTufR3bM57ElPaPO+0GNFLVhwHrYlyF1yAmLXruUFu6W2zFik3dQIONKO9\nOkeMv9BoEQHQwSvaPc9ikNFgXBFfA8XUhWcwMT/CM9PLvDOI5N9iWHH0/ayi\nhw7V+ygXmxIkk0HlsdLAHxIokYBbQyBiz4UcS4e9VggX6qBvYsTUsS+BiyUW\neBCE/NBnZ/KXebkn0HNOIkLLmnzb+aNxeMFdw6OBEbbhfIrbHN1xsfCJ1JnJ\nNY9A4jreekMXhdCMI76ee6Hk0YoxGupJbopWuLvUEkPkawAnYLHPVDPdKyLD\ns8i/WMOMPVIAqrD1dig1ksVPAfe5x8OTZBLhx621eIMPASmhc81D1yi233J/\nOxcGH9QAsj9Y421M7DqpG+L7VEg5eqH1fK4SvA3wW3UKYAikP6EtDBimEe/c\na8LaFbMYonG9YiREdcskmRlBEieJ7QE9lU698U+fFnCfaA90Jsgo28+vlcBZ\ntzN+I0UPDP8YR27dEmg0PSpM+ljC2ye7o7MGKctgcFY3IhmaZVJ0KLHbjZqP\nF25P\r\n=aOQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDtiNMajqkbybMiFVr8uJCteI0tso+7cJ8M8SyD5AyKAiEAg0jmsL9JNxJKqqKVjORyaNnKv+276fKb9HvYTrw46xg="}]},"maintainers":[{"name":"cond","email":"iamaroott@gmail.com"}],"_npmUser":{"name":"cond","email":"iamaroott@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/redux-inject-reducer-and-saga_1.0.0_1589058588173_0.3439579988093917"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-09T21:09:48.132Z","1.0.0":"2020-05-09T21:09:48.296Z","modified":"2022-04-05T00:47:05.587Z"},"maintainers":[{"name":"cond","email":"iamaroott@gmail.com"}],"description":"Inject reducer and saga anywhere in the application.","homepage":"https://github.com/marcelmokos/redux-inject-reducer-and-saga#readme","keywords":["react","redux","store","create store","injectable store","reducer","create reducer","inject","inject reducer","inject saga","inject redux-saga","inject thunk","inject redux-thunk"],"repository":{"type":"git","url":"git+https://github.com/marcelmokos/redux-inject-reducer-and-saga.git"},"author":{"name":"Marcel Mokoš","url":"https://github.com/marcelmokos"},"bugs":{"url":"https://github.com/marcelmokos/redux-inject-reducer-and-saga/issues"},"license":"MIT","readme":"# 💉 redux-inject-reducer-and-saga\n\n[![npm version](https://img.shields.io/npm/v/redux-inject-reducer-and-saga.svg?style=flat)](https://www.npmjs.com/package/redux-inject-reducer-and-saga) \n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) \n[![Build Status](https://travis-ci.org/marcelmokos/redux-inject-reducer-and-saga.svg?branch=master)](https://travis-ci.org/marcelmokos/redux-inject-reducer-and-saga) \n[![Coverage Status](https://coveralls.io/repos/github/marcelmokos/redux-inject-reducer-and-saga/badge.svg?branch=master)](https://coveralls.io/github/marcelmokos/redux-inject-reducer-and-saga?branch=master)\n[![dependency](https://david-dm.org/marcelmokos/redux-inject-reducer-and-saga/status.svg)](https://david-dm.org/marcelmokos/redux-inject-reducer-and-saga) \n[![devDep](https://david-dm.org/marcelmokos/redux-inject-reducer-and-saga/dev-status.svg)](https://david-dm.org/marcelmokos/redux-inject-reducer-and-saga?type=dev)\n[![Known Vulnerabilities](https://snyk.io/test/github/marcelmokos/redux-inject-reducer-and-saga/badge.svg)](https://snyk.io/test/github/marcelmokos/redux-inject-reducer-and-saga) \n\nCode highly influenced by [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) with some modifications\nIf you need more informations read [react-boilerplate docs](https://github.com/react-boilerplate/react-boilerplate/tree/master/docs) they are great.\n\n\nThe library allows us to add reducers and sagas after the store was initialized.\nSince library wants to be universal and not decide what will be used it allows to use [redux-thunk](https://www.npmjs.com/package/redux-thunk) and [redux-saga](https://www.npmjs.com/package/redux-saga) simultaneously. With preference to use redux-saga.\nThe library is set to use [immutable](https://www.npmjs.com/package/immutable) but developers can use simple object and arrays as state in reducers.\n[react-router v4](https://www.npmjs.com/package/react-router) is set and route reducer is included as default reducer.\n\n# Install:\n\n```bash\nyarn add redux-inject-reducer-and-saga\n```\n```bash\nnpm install --save-dev redux-inject-reducer-and-saga\n```\n\n# Target browsers .babelrc\n- adding polyfils is on the library consumer\n- IE >= 10\n- browsers: `[\"last 4 versions\"]`\n\n# Usage:\n### configureStore\n\n#### Without parameters\n- only default route reducer will be initialized\n```js\nimport {configureStore} from \"redux-inject-reducer-and-saga\";\n\nconst store = configureStore();\nexpect(store.getState()).toMatchSnapshot();\n/*\nImmutable.Map {\n  \"route\": Immutable.Map {\n    \"location\": null,\n  },\n}\n*/\n```\n\n#### With reducers parameter\n- reducers will be initialized with reducer's initialState\n```js\nimport {configureStore} from \"redux-inject-reducer-and-saga\";\n\nfunction staticReducer(state = null) {\n return state;\n}\n\nconst reducers = {config: staticReducer};\nconst store = configureStore(reducers);\nexpect(store.getState()).toMatchSnapshot();\n/*\nImmutable.Map {\n  \"route\": Immutable.Map {\n    \"location\": null,\n  },\n  \"config\": null, // 💉\n}\n*/\n```\n#### With reducers and initialState parameter\n- reducers will be initialized with initialState argument\n```js\nimport {configureStore} from \"redux-inject-reducer-and-saga\";\n\nfunction staticReducer(state = null) {\n return state;\n}\n\nconst reducers = {config: staticReducer};\nconst initialState = {config: true};\nconst store = configureStore(reducers, initialState);\nexpect(store.getState()).toMatchSnapshot();\n/*\nImmutable.Map {\n  \"route\": Immutable.Map {\n    \"location\": null,\n  },\n  \"config\": true, // 💉\n}\n */\n```\n\n## Inject Reducer and Saga\n```js\nimport React from \"react\";\nimport {mount} from \"enzyme\";\nimport {compose, bindActionCreators} from \"redux\";\nimport {connect} from \"react-redux\";\nimport {put, takeLatest} from \"redux-saga/effects\";\nimport {configureStore, injectReducer, injectSaga} from \"redux-inject-reducer-and-saga\";\n\nconst getWrappedSagaComponent = prefix => {\n  // constants\n  const NAME_SEND = `${prefix}/NAME_SEND`;\n  const NAME_SET = `${prefix}/NAME_SET`;\n\n  // actions\n  const nameSendAction = name => ({\n    type: NAME_SEND,\n    payload: name,\n  });\n\n  const nameSetAction = name => ({\n    type: NAME_SET,\n    payload: name,\n  });\n\n  // reducers\n  const reducer = (state = \"no-name\", {type, payload}) => {\n    switch (type) {\n      case NAME_SET:\n        return payload;\n      default:\n        return state;\n    }\n  };\n\n  // sagas\n  function* nameSetSaga(action) {\n    const name = action.payload;\n\n    yield put(nameSetAction(name));\n  }\n\n  function* saga() {\n    yield takeLatest(NAME_SEND, nameSetSaga);\n  }\n\n  const withReducer = injectReducer({key: `${prefix}/testReducer`, reducer});\n  const withSaga = injectSaga({key: `${prefix}/testSaga`, saga});\n  const withConnect = connect(\n    state => ({name: state.get(`${prefix}/testReducer`)}), // mapStateToProps\n    dispatch => bindActionCreators({nameSend: nameSendAction}, dispatch), // mapDispatchToProps\n  );\n\n  type Props = {\n    name: string,\n    nameSend: string => void,\n  };\n\n  class Component extends React.Component<Props, any> {\n    componentDidMount() {\n      this.props.nameSend(`Name ${prefix}`);\n    }\n\n    render() {\n      return <span>{this.props.name}</span>;\n    }\n  }\n\n  // prettier-ignore\n  return compose(\n    withReducer, \n    withSaga, \n    withConnect,\n  )(Component);\n};\n\n\nconst store = configureStore();\n\nit(\"component A, with reducer and saga\", () => {\n  const WrappedComponent = getWrappedSagaComponent(\"A\");\n\n  const component = mount(<WrappedComponent />, {context: {store}});\n  expect(store.getState()).toMatchSnapshot();\n  /*\n  \n  Immutable.Map {\n    \"route\": Immutable.Map {\n      \"location\": null,\n    },\n    \"A/testReducer\": \"Name A\", // 💉\n  }\n  \n   */\n});\n\nit(\"component B, with reducer and saga\", () => {\n  const WrappedComponent = getWrappedSagaComponent(\"B\");\n\n  // store used from previous example\n  const component = mount(<WrappedComponent />, {context: {store}});\n  expect(store.getState()).toMatchSnapshot();\n  /*\n  \n  Immutable.Map {\n    \"route\": Immutable.Map {\n      \"location\": null,\n    },\n    \"A/testReducer\": \"Name A\",\n    \"B/testReducer\": \"Name B\", // 💉\n  }\n  \n   */\n});\n```\n\n## Inject Reducer and use thunk\n```js\nimport React from \"react\";\nimport {mount} from \"enzyme\";\nimport {compose, bindActionCreators} from \"redux\";\nimport {connect} from \"react-redux\";\nimport {configureStore, injectReducer, injectSaga} from \"redux-inject-reducer-and-saga\";\n\nconst getWrappedThunkComponent = prefix => {\n  // constants\n  const NAME_SET = `${prefix}/NAME_SET`;\n\n  const nameSetAction = name => ({\n    type: NAME_SET,\n    payload: name,\n  });\n\n  // reducers\n  const reducer = (state = \"no-name\", {type, payload}) => {\n    switch (type) {\n      case NAME_SET:\n        return payload;\n      default:\n        return state;\n    }\n  };\n\n  // thunks\n  const nameSendThunk = name => dispatch => dispatch(nameSetAction(name));\n\n  const withReducer = injectReducer({key: `${prefix}/testReducer`, reducer});\n  const withConnect = connect(\n    state => ({name: state.get(`${prefix}/testReducer`)}), // mapStateToProps\n    dispatch => bindActionCreators({nameSend: nameSendThunk}, dispatch), // mapDispatchToProps\n  );\n\n  type Props = {\n    name: string,\n    nameSend: string => void,\n  };\n\n  class Component extends React.Component<Props, any> {\n    componentDidMount() {\n      this.props.nameSend(`Name ${prefix}`);\n    }\n\n    render() {\n      return <span>{this.props.name}</span>;\n    }\n  }\n  \n  // prettier-ignore\n  return compose(\n    withReducer, \n    withConnect,\n  )(Component);\n};\n\nit(\"component C, with reducer and saga\", () => {\n  const WrappedComponent = getWrappedThunkComponent(\"C\");\n\n  // store used from previous examples\n  const component = mount(<WrappedComponent />, {context: {store}});\n  expect(store.getState()).toMatchSnapshot();\n  /*\n  \n  Immutable.Map {\n    \"route\": Immutable.Map {\n      \"location\": null,\n    },\n    \"A/testReducer\": \"Name A\",\n    \"B/testReducer\": \"Name B\",\n    \"C/testReducer\": \"Name C\", // 💉\n  }\n  \n   */\n});\n```\n\nMore complex test: https://github.com/marcelmokos/redux-inject-reducer-and-saga/blob/master/src/configureStore.test.js\n","readmeFilename":"README.md"}