![\"Sergey](\"https://avatars0.githubusercontent.com/u/5620073?v=4\")
Sergey Sova
📖 💻 💡 🤔 ⚠️
![\"Arutyunyan](\"https://avatars0.githubusercontent.com/u/27290320?v=4\")
Arutyunyan Artyom
👀 🤔 🐛 💻
![\"Igor](\"https://avatars3.githubusercontent.com/u/26767722?v=4\")
Igor Kamyshev
📦 ⚠️
![\"Ilya\"/](\"https://avatars2.githubusercontent.com/u/10822601?v=4\")
Ilya
🐛
![\"Ivanov](\"https://avatars2.githubusercontent.com/u/13759065?v=4\")
Ivanov Vadim
📖
![\"Аnton](\"https://avatars0.githubusercontent.com/u/16399895?v=4\")
Аnton Krivokhizhin
📦 🚇
![\"Viacheslav\"/](\"https://avatars0.githubusercontent.com/u/421161?v=4\")
Viacheslav
🤔 👀
![\"Dmitri](\"https://avatars1.githubusercontent.com/u/1402016?v=4\")
Dmitri Razin
🐛 🎨
![\"Surgie](\"https://avatars3.githubusercontent.com/u/9006227?v=4\")
Surgie Finesse
💻
![](\"https://raw.githubusercontent.com/sergeysova/redux-symbiote/master/assets/logo.svg?sanitize=true\"){kind=logo}
\n\n\n\nWrite your actions and reducers without pain\n\n## Usage\n\n```js\nimport { createSymbiote } from 'redux-symbiote'\n\n\nconst initialState = {\n error: null,\n accounts: [],\n loading: false,\n}\n\nconst symbiotes = {\n accounts: {\n loading: {\n start: (state) => ({ ...state, loading: true }),\n failed: (state, error) => ({ ...state, loading: false, error }),\n finish: (state, accounts) => ({ ...state, loading: false, accounts }),\n },\n },\n}\n\nexport const { actions, reducer } = createSymbiote(initialState, symbiotes)\n```\n\nAlso you can use CommonJS:\n\n```js\nconst { createSymbiote } = require('redux-symbiote')\n\n// ...\n```\n\n## Demo\n\n[](https://codesandbox.io/s/3x7n34n336?module=%2Fsrc%2Fstore%2Fsymbiotes%2Ftodos.js)\n\n## API\n\n### Create symbiote\n\n```js\nfunction createSymbiote(\n initialState,\n symbiotes,\n ?namespace = ''\n)\n```\n\n### Create action handlers + reducer\n\n```js\ncreateSymbiote(initialState, {\n actionType: actionReducer,\n nestedType: {\n actionType: nestedActionReducer,\n }\n})\n```\n\nExample:\n\n```js\nconst initialState = { value: 1, data: 'another' }\n\nconst symbiotes = {\n increment: (state) => ({ ...state, value: state.value + 1 }),\n decrement: (state) => ({ ...state, value: state.value - 1 }),\n setValue: (state, value) => ({ ...state, value }),\n setData: (state, data) => ({ ...state, data }),\n concatData: (state, data) => ({ ...state, data: data + state.data }),\n}\n\nexport const { actions, reducer } = createSymbiote(initialState, symbiotes)\n\ndispatch(actions.increment()) // { type: 'increment' }\ndispatch(actions.setValue(4)) // { type: 'setValue', payload: [4] }\ndispatch(actions.decrement()) // { type: 'decrement' }\ndispatch(actions.setData('bar')) // { type: 'setData', payload: ['bar'] }\ndispatch(actions.concatData('foo ')) // { type: 'concatData', payload: ['foo '] }\n\n// State here { value: 3, data: 'foo bar' }\n```\n\nWhen you call `actions.setValue` symbiote calls your action handler with previousState and all arguments spreaded after state.\n\n#### Nested example\n\n```js\nconst initialState = { value: 1, data: 'another' }\n\nconst symbiotes = {\n value: {\n increment: (state) => ({ ...state, value: state.value + 1 }),\n decrement: (state) => ({ ...state, value: state.value - 1 }),\n },\n data: {\n set: (state, data) => ({ ...state, data }),\n concat: (state, data) => ({ ...state, data: data + state.data }),\n },\n}\n\nexport const { actions, reducer } = createSymbiote(initialState, symbiotes)\n\ndispatch(actions.value.increment()) // { type: 'value/increment' }\ndispatch(actions.value.decrement()) // { type: 'value/decrement' }\ndispatch(actions.data.set('bar')) // { type: 'data/set', payload: ['bar'] }\ndispatch(actions.data.concat('foo ')) // { type: 'data/concat', payload: ['foo '] }\n```\n\n#### Options\n\nThird parameter in `createSymbiote` is optional `string` or `object`.\n\nIf `string` passed, symbiote converts it to `{ namespace: 'string' }`.\n\nObject has optional properties:\n\n- `namespace` is `string` — set prefix for each action type\n- `defaultReducer` is `(previousState, action) -> newState` — called instead of return previous state\n- `separator` is `string` — change separator of nested action types (default `/`)\n\n#### ActionHandler##toString\n\nYou can use action as action type in classic reducer or in [`handleAction(s)`](https://redux-actions.js.org/docs/api/handleAction.html) in [`redux-actions`](https://npmjs.com/redux-actions)\n\n```js\nimport { handleActions } from 'redux-actions'\nimport { createSymbiote } from 'redux-symbiote'\n\nconst initialState = { /* ... */ }\n\nconst symbiotes = {\n foo: {\n bar: {\n baz: (state, arg1, arg2) => ({ ...state, data: arg1, atad: arg2 }),\n },\n },\n}\n\nconst { actions } = createSymbiote(initialState, symbiotes)\n\nconst reducer = handleActions({\n [actions.foo.bar.baz]: (state, { payload: [arg1, arg2] }) => ({\n ...state,\n data: arg1,\n atad: arg2,\n }),\n}, initialState)\n```\n\n### How to use reducer\n\n`createSymbiote` returns object with `actions` and `reducer`.\n\nCreated reducer already handles created actions. You don't need to handle actions from symbiote.\n\n```js\n// accounts.js\nexport const { actions, reducer } = createSymbiote(initialState, symbiotes, options)\n\n// reducer.js\nimport { reducer as accounts } from '../accounts/symbiote'\n// another imports\n\nexport const reducer = combineReducers({\n accounts,\n // another reducers\n})\n```\n\n## Why?\n\nRedux recommends creating constants, action creators and reducers separately.\n\nhttps://redux.js.org/basics/\n\n```js\nconst ACCOUNTS_LOADING_START = 'ACCOUNTS_LOADING_START'\nconst ACCOUNTS_LOADING_FAILED = 'ACCOUNTS_LOADING_FAILED'\nconst ACCOUNTS_LOADING_FINISH = 'ACCOUNTS_LOADING_FINISH'\n\n\nexport function loadingStart() {\n return {\n type: ACCOUNTS_LOADING_START,\n }\n}\n\nexport function loadingFailed(error) {\n return {\n type: ACCOUNTS_LOADING_FAILED,\n payload: {\n error,\n },\n }\n}\n\nexport function loadingFinish(accounts) {\n return {\n type: ACCOUNTS_LOADING_FINISH,\n payload: {\n accounts,\n },\n }\n}\n\nconst initialState = {\n error: null,\n accounts: [],\n loading: false,\n}\n\nexport function accountsReducer(state = initialState, action) {\n switch (action.type) {\n case ACCOUNTS_LOADING_START:\n return Object.assign({}, state, {\n loading: true,\n })\n\n case ACCOUNTS_LOADING_FAILED:\n return Object.assign({}, state, {\n loading: false,\n error: action.payload.error,\n })\n\n case ACCOUNTS_LOADING_FINISH:\n return Object.assign({}, state, {\n loading: false,\n accounts: action.payload.accounts,\n })\n }\n\n return state\n}\n```\n\nSo much boilerplate.\n\nLet's look at [redux-actions](https://npmjs.com/redux-actions).\n\n```js\nimport { createActions, handleActions, combineActions } from 'redux-actions'\n\n\nexport const actions = createActions({\n accounts: {\n loading: {\n start: () => ({ loading: true }),\n failed: (error) => ({ loading: false, error }),\n finish: (accounts) => ({ loading: false, accounts }),\n },\n },\n}).accounts\n\nconst initialState = {\n error: null,\n accounts: [],\n loading: false,\n}\n\nexport const accountsReducer = handleActions({\n [combineActions(actions.loading.start, actions.loading.failed, actions.loading.finish)]:\n (state, { payload: { loading } }) => ({ ...state, loading }),\n\n [actions.loading.failed]: (state, { payload: { error } }) => ({ ...state, error }),\n\n [actions.loading.finish]: (state, { payload: { accounts } }) => ({ ...state, accounts }),\n}, initialState)\n```\n\nBut we have some duplicate in action creators properties and reducer.\n\nLet's rewrite it to redux-symbiote:\n\n\n```js\nimport { createSymbiote } from 'redux-symbiote'\n\nconst initialState = {\n error: null,\n accounts: [],\n loading: false,\n}\n\nconst symbiotes = {\n start: (state) => ({ ...state, loading: true }),\n finish: (state, { accounts }) => ({ ...state, loading: false, accounts }),\n failed: (state, { error }) => ({ ...state, loading: false, error }),\n}\n\nexport const { actions, reducer: accountsReducer } =\n createSymbiote(initialState, symbiotes, 'accounts/loading')\n```\n\nThat's all. `accounts/loading` is an optional namespace for actions types.\n\nTo reduce noise around loading actions try [`symbiote-fetching`](https://npmjs.com/symbiote-fetching).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\nSergey Sova 📖 💻 💡 🤔 ⚠️ | \n Arutyunyan Artyom 👀 🤔 🐛 💻 | \n Igor Kamyshev 📦 ⚠️ | \n Ilya 🐛 | \n Ivanov Vadim 📖 | \n Аnton Krivokhizhin 📦 🚇 | \n Viacheslav 🤔 👀 | \n
Dmitri Razin 🐛 🎨 | \n Surgie Finesse 💻 | \n