meteor-redux-middlewares
Middlewares to sync meteor reactive sources with redux store.
Installation
Using npm
npm i meteor-redux-middlewares --save
Using yarn
yarn add meteor-redux-middlewares
Using meteor
meteor add samy:redux-middlewares
Table of contents
Example of use
All the following code is available on the demo repository.
Step 1: apply middlewares
// File '/imports/store/index.js';;// or: import createReactiveMiddlewares from 'meteor/samy:redux-middlewares';; // Of course, you can use other middlewares as well;; ; // We use an injection pattern to avoid any direct dependency on the meteor// build tool, or version of tracker within the package.//// This way you should be able to use your meteor version, a community npm// version, the future extracted official mdg package etc...const sources subscriptions = ; const store = ; ;
Step 2: create actions
// File '/imports/actions/user/load.js';; const USER_REACTIVE_SOURCE_CHANGED = 'USER_REACTIVE_SOURCE_CHANGED'; const loadUser = ;
This action will automatically be intercepted by the sources
middleware. Your get
function is running inside a Tracker.autorun
, that means each time the data will change, the middleware will dispatch an action with the _REACTIVE_SOURCE_CHANGED
suffix. In this example, we are dispatching an action with a key of user
, so we have to handle the USER_REACTIVE_SOURCE_CHANGED
action in our reducer.
// File '/imports/actions/home/posts/load.js';;; const HOME_POSTS_SUBSCRIPTION_READY = 'HOME_POSTS_SUBSCRIPTION_READY';const HOME_POSTS_SUBSCRIPTION_CHANGED = 'HOME_POSTS_SUBSCRIPTION_CHANGED';const HOME_POSTS_SUB = 'home.posts'; const loadHomePosts = ;
This action will automatically be intercepted by the subscriptions
middleware. Your get
function is running inside a Tracker.autorun
, that means each time the data will change, the middleware will dispatch an action with the _SUBSCRIPTION_CHANGED
suffix. In the same way, each time the subscription will be ready (or not), the middleware will dispatch an action with the _SUBSCRIPTION_READY
suffix. In this example, we are dispatching an action with a key of home.posts
, so we have to handle the HOME_POSTS_SUBSCRIPTION_READY
and HOME_POSTS_SUBSCRIPTION_CHANGED
actions in our reducer.
Step 3: create reducers
// File '/imports/reducers/user.js'; const initialState = ready: false; { }
With the reactive sources, we can access to the data returned by our get
function inside the action.payload
attribute.
// File '/imports/reducers/home.js'; ; const initialState = ready: false posts: postsSubscriptionStopped: false; { }
With the subscriptions, we can access to:
- the data returned by our
get
function inside theaction.payload
attribute. - the readiness state of the subscription inside the
action.payload.ready
attribute.
Stop a subscription
You can stop a subscription by dispatching the stopSubscription
action, for example inside a container component:
;;;; const mapStateToProps = postsReady: statehomeready posts: statehomeposts postsSubscriptionStopped: statehomepostsSubscriptionStopped; const mapDispatchToProps = { ; } { ; }; const HomePageContainer = HomePageComponent;
Pass extra data to the reducer
If you need to pass some extra data to the reducer with the subscriptions
middleware when your subscription's ready state changes, you can add an onReadyData
attribute in your action:
;;; const HOME_POSTS_SUBSCRIPTION_READY = 'HOME_POSTS_SUBSCRIPTION_READY';const HOME_POSTS_SUBSCRIPTION_CHANGED = 'HOME_POSTS_SUBSCRIPTION_CHANGED';const HOME_POSTS_SUB = 'home.posts'; const loadHomePosts = ;
Then in your reducer, you can access to the extra data by using the payload.data
attribute;
; const initialState = ready: false posts: ; { }
Credits
Based on the work of Gildas Garcia (@djhi) on his My-Nutrition project. Thanks to Kyle Chamberlain (@Koleok) for his contribution.