{"name":"mobx-action-cable","version":"0.1.11","description":"Opinionated MobX state storage","main":"lib/index.js","typings":"lib/index","repository":{"type":"git","url":"git+https://github.com/neb636/mobx-action-cable.git"},"author":{"name":"nblanchard","email":"neb636@gmail.com"},"license":"MIT","scripts":{"build":"tsc --pretty -d","publish-npm":"npm publish","publish-npm-beta":"npm publish --tag beta","test":"jest --config=jest.config.json"},"dependencies":{"@types/react":"^16.3.12","mobx":"^4.2.0","mobx-react":"^5.0.0","react":"^16.3.2"},"devDependencies":{"@types/jest":"^22.2.3","@types/react-dom":"^16.0.5","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","jest":"^22.4.3","react-dom":"^16.3.2","redux-logger":"^3.0.6","ts-jest":"^22.4.4","typescript":"^2.8.3"},"readme":"![\"screen](\"https://user-images.githubusercontent.com/4202152/36009267-722e2976-0d19-11e8-9b1a-0a883e6364a0.png\")
\n\n\n# What is MobX Action Cable?\n\nMobX Action Cable is a opinionated wrapper over MobX that handles state storage.\n\n- Redux style API (compliant with most redux middleware)\n- Importable no boilerplate typed actions\n\n\n### Differences between MobX Action Cable and standard MobX?\n\n#### Separation between State Definition and Actions\n\n\n\n##### Standard MobX\n\n```ts\nclass Todos {\n @observable todos: Todo[] = [];\n @observable fetchError: any;\n\n loadTodos() {\n // ...\n }\n}\n\n```\n\n\n##### MobX Action Cable\n\n```ts\nclass TodosState {\n @observable todos: Todo[] = [];\n @observable fetchError: any;\n}\n\n\nconst loadTodos = () => ({ todosState }: State) => {\n // ...\n};\n\nconst setTodos = (payload: { todos: Todo[] }) => ({ todosState }: State) => {\n // ...\n};\n\nconst TodosActions = connectActionsToStore({\n setTodos\n});\n\nconst TodosAsyncActions = connectActionsToStore({\n loadTodos\n});\n```\n\n\n### Differences between MobX Action Cable and standard MobX?\n\n\n\n## Example Code\n\n#### `register-store.ts`\n```ts\nimport { createState, createStore, getStateJSON } from 'mobx-action-cable';\nimport GlobalState from '../store.global/state';\nimport UserState from '../store.user/state';\nimport { createLogger } from 'redux-logger'\n\nconst logger = createLogger({\n collapsed: true,\n stateTransformer: getStateJSON\n});\n\nconst mapStateNamespacesToState = () => {\n\n return {\n globalState: new GlobalState(),\n userState: new UserState()\n }\n};\n\n\nconst state = createState(mapStateNamespacesToState);\n\nexport type State = ReturnType;\n\n\nconst {\n connectActionsToStore,\n connectAsyncActionsToStore,\n connect\n} = createStore(state, applyMiddleware(logger));\n\nexport {\n connect,\n connectActionsToStore,\n connectAsyncActionsToStore\n};\n```\n\n\n#### `store.user/state.ts`\n\n```ts\nimport { observable, computed } from 'mobx-action-cable';\n\n\nexport class UserState {\n @observable firstName: string;\n @observable lastName: string;\n @observable birthday: string;\n @observable email: string;\n\n @computed get fullName() {\n return `${this.firstName} ${this.lastName}`;\n }\n}\n```\n\n\n#### `store.user/actions.ts`\n\n```ts\nimport { connectActionsToStore, State } from './register-store';\n\n\nconst setUserState = (payload: { user: UserState }) => (state: State) => {\n state.userState = payload.user;\n};\n\nconst updateBirthday = (payload: { birthday: string }) => ({ userState }: State) => {\n userState.birthday = payload.birthday;\n};\n\nconst UserActions = connectActionsToStore({\n setUserState,\n updateBirthday\n});\n\nexport default UserActions;\n```\n\n#### `store.user/async-actions.ts`\n\n```ts\nimport { connectAsyncActionsToStore, State } from '../register-store';\nimport UserActions from './actions.ts';\nimport GlobalActions from '../store.global/actions.ts';\nimport { RestApiService } from './rest-api-service';\n\n\nconst fetchUser = (payload: { email: string }) => async ({ userState }: State) => {\n const { email } = payload;\n\n try {\n const user = await RestApiService.user.get(email);\n\n // Dispatch sync action after async calls\n UserActions.setUserState({ user });\n }\n catch (error) {\n GlobalActions.setAuthenticationError({ error })''\n }\n};\n\n\nconst UserAsyncActions = connectAsyncActionsToStore({\n fetchUser\n});\n\nexport default UserAsyncActions;\n```\n\n\n#### `UserProfileCard/UserProfileCard.tsx`\n```tsx\nimport { connect, State } from '../register-store.ts';\nimport UserActions from '../store.user/actions.ts';\n\ntype Props = {\n someRegularProp: string\n};\n\ntype InjectedProps = ReturnType;\n\n\nfunction UserProfileCard(props: Props & InjectedProps) {\n const { fullName, birthday } = props;\n\n return (\n \n\n
{ fullName }
\n
{ birthday }
\n\n
\n