Coolshare Pub/Sub for React - An approach different from Flux
By Mark Qian 3/2017 (firstname.lastname@example.org)
The demo page: http://reactpubsub.coolshare.surge.sh
Communication among React components could be a pain in case you use react without Flux framework. Comparing to Flux, this package is a different/easier. Similar to Redux: **************** - both publish method in PubsubManager and Pulisher component act like the "Action Creator", where publish method allows API or event handler to generate "Actions" and the Publish component generate "Actions" from user interaction. - An event (including a topicName with data) is an "Action" - PubsubManager is the "Dispatcher" and topicName is the type of "Action" - Event handler is the "Reducer". In case of React, the event handler makes change to the state/model of React view to trigger the view update. Different from Redux: ********************* - we do not force the event handler to only work on the model while it acts as other roles such as an "Action creator" that publish an event. - you need to learn almost nothing to use it - One key advantage provided by Pub/Sub pattern is the communication: instead of passing references around the component hierarchy in order to reach the other party, feels like a baby crawling on a 2D surface (since you need to travel the hierarchy node by node), you can fly like a bird in a 3D space: this package allows you to communicate between any two or more points including any components React Hierarchy and services which in turn update the remote model. And the callback of remote request then publishes another topic (event/action) to update the state of view (setView in React).
Who should use this:
for those who just want to do something quickly with React instead of dealing or learning more on Redux or Mobx. You need to learn almost nothing for using this package.
The key features:
- You can specify any event to trigger the publishing
- Macro Key Words allow you to publish with data you specified.
Instructions to use:
A). publish a topic in two ways:
B). subscribe/unsubscribe a topic
C). To run the sample code, you need to
0). Prepare required environment you need to install node.js and git 1). Download it by cd c:\ git clone https://github.com/coolshare/CoolshareReactPubSub.git CoolshareReactPubSub then cd CoolshareReactPubSub 2). Do installation npm install 3). Start the server and browser by npm start You should see a browser page is opened at http://localhost:3000 Click each component on the page and the result will be shown in the console. Have fun!
D). To install it into your React application, you need to
1). npm install --save coolshare_react_pub_sub_kit 2). Follow the instructions in A). B). above to use it in your application.
Go Mark's home page http://MarkQian.com to see more.