[{"_1":2,"_71":-5,"_72":-5},"loaderData",{"_3":4},"post",{"_5":6,"_7":8,"_36":37,"_54":55,"_69":70},"content","\nThe **BLoC Pattern** has been designed by _Paolo Soares_ and _Cong Hui_, from\nGoogle and first presented during the _DartConf 2018_ (January 23-24, 2018).\n[See the video on YouTube](https://www.youtube.com/watch?v=PLHln7wHgPE 'BLoC Pattern Flutter').\n\nBLoC stands for **B**usiness **Lo**gic **C**omponent. Initially was conceived to\nallow to reuse the same code between Flutter and Angular Dart, but in fact is\nindependently of the platform: web application, mobile application, back-end.\n\nIt can be considered an alternative to the\n[Redux port for flutter](https://pub.dartlang.org/packages/flutter_redux 'Redux port for flutter') making\nuse of Dart streams. In our case, we’re going to use Observables from the library\n[RxJS](https://rxjs.dev/ 'RxJS') , but any other option like\n[xstream](http://staltz.github.io/xstream/ 'xstream') will be valid as well.\n\nIn short, the BLoC will:\n\n- contain business logic (ideally in bigger applications we will have multiple BLoCs)\n- rely _exclusively_ on the use of _Observables_ for both input (_Observer_) and output (_Observable_)\n- remain _platform independent_\n- remain _environment independent_\n\n## How BLoC works?\n\nI’m not going to explain extensively how BLoC works (there is other people that\ndid a better job I will do here), but just some basic hints.\n\n![BLoC Schema](/images/bloc-schema.png)\n\nThe BLoC will hold the business logic and components will have no knowledge\nabout what's happening inside. Components will send _events_to the BLoC via\n\\_Observers_ and will be notified by the BLoC via _Observables_.\n\n## Implementing the BLoC\n\nThis is basic typescript example of a search BLoC using RxJS:\n\n```typescript\nexport class SearchBloc {\n private _results$: Observable;\n private _preamble$: Observable;\n private _query$ = new BehaviorSubject('');\n\n constructor(private api: API) {\n this._results$ = this._query$.pipe(\n switchMap((query) => {\n return observableFrom(this.api.search(query));\n })\n );\n this._preamble$ = this.results$.pipe(\n withLatestFrom(this._query$, (_, q) => {\n return q ? `Results for ${q}` : 'All results';\n })\n );\n }\n\n get results$(): Observable {\n return this._results$;\n }\n\n get preamble$(): Observable {\n return this._preamble$;\n }\n\n get query(): Observer {\n return this._query$;\n }\n\n dispose() {\n this._query$.complete();\n }\n}\n```\n\n`results$` and `preamble$` are exposed to be subscribed from a component and\nthey express asynchronous values that change in response to changes in `query`.\n\n`query` is exposed as `Observer` to the outside, to allow the addition\nof new value from the components. Within `SearchBloc` , we have\n`_query$: BehaviorSubject` as the stream source, and the constructor\ndeclares `_results$` and `_preamble$` to respond to `_query$`.\n\n## Using it on React\n\nIn order to use it on React we need to create a new instance of the BLoC and\nshare it to the child components using a React context.\n\n```jsx\nconst searchBloc = new SearchBloc(new API());\nconst SearchContext = React.createContext(searchBloc);\n```\n\nWe have to expose it using the context provider:\n\n```jsx\nconst App = () => {\n const searchBloc = useContext(SearchContext);\n\n useEffect(() => {\n return searchBloc.dispose;\n }, [searchBloc]);\n\n return (\n \n \n \n \n );\n};\n```\n\nIt’s important to have the `useEffect` returning the dispose method of the BLoC\nso it will complete the observer when the component is unmounted.\n\nThen we can publish changes to the BLoC from the `SearchInput` component:\n\n```jsx\nconst SearchInput = () => {\n const searchBloc = useContext(SearchContext);\n const [query, setQuery] = useState('');\n\n useEffect(() => {\n searchBloc.query.next(query);\n }, [searchBloc, query]);\n\n return (\n setQuery(target.value)}\n />\n );\n};\n```\n\nWe got the BLoC using the hook `useContext` and then with `useEffect` every time\nthe query change we publish the new value to the BLoC.\n\nNow it’s time to the `ResultList`:\n\n```jsx\nconst ResultList = () => {\n const searchBloc = useContext(SearchContext);\n const [results, setResults] = useState([]);\n\n useEffect(() => {\n return searchBloc.results$.subscribe(setResults);\n }, [searchBloc]);\n\n return (\n

\n {results.map(({ id, name }) => (\n

{name}

\n ))}\n

\n );\n};\n```\n\nAs before, we use the `useContext` to get the BLoC, but now in the `useEffect`\nwe subscribe the changes on the `results$` interface to update the local state\nof the component. It’s important to return the return value of the subscribe,\nsince it will unsubscribe when the component is unmounted.\n\n## Final thoughts\n\nThe final code is not complex, at least if you have a minimal knowledge about\n_Observables_ and _hooks_. I have the feeling that the code is quite readable\nand helps to keep the business logic outside the components. It’s true that we\nshould take care about to unsubscribe from the observables and dispose the BLoC\nwhen the components are unmounted, but these issues could be easily solvable\ncreating some new hooks like `useBlocObservable` and `useBlocObserver`. But this\nI’ll try in the future, soon I hope, in a side project I’m using this pattern.\n","frontMatter",{"_9":10,"_11":12,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_34":35},"wordCount",752,"readingTime",{"_13":14,"_15":16,"_17":18,"_19":20},"text","4 min read","minutes",3.75,"time",225000,"words",750,"title","BLoC Pattern with React Hooks","date","2019-02-18","spoiler","About how to extract the business logic from the components of a React application using the BLoC pattern from Flutter, the new hooks API, and RxJS observables.","featuredImage","bloc-schema.png","tags",[31,32,33],"React","BLoC","hooks","slug","bloc-pattern-with-react-hooks","prev",{"_9":38,"_11":39,"_44":3,"_21":45,"_23":46,"_25":47,"_48":49,"_29":50,"_34":53},1624,{"_13":40,"_15":41,"_17":42,"_19":43},"9 min read",8.11,486600,1622,"layout","Refactor TodoMVC with Redux Starter Kit","2019-01-26","Redux Starter Kit is a toolset to make clean and readable code when working with React and Redux. See an example of how you can refactor an existing application getting all the profit from Redux Starter Kit.","draft",false,[31,51,52],"Redux","JavaScript","todomvc-redux-starter-kit","next",{"_9":56,"_11":57,"_21":62,"_23":63,"_25":64,"_29":65,"_34":68},995,{"_13":58,"_15":59,"_17":60,"_19":61},"5 min read",4.965,297900,993,"Adaptive Media Serving using Service Workers","2019-06-17","Everyone has experienced how visiting a web site over a slow network connection usually takes ages to load. We are going to explore how to load different media content using the Network Information API.",[52,66,67],"Service Workers","performance","adaptative-media-serving-using-service-workers","lang","en","actionData","errors"]