redux-meteor-subs

Wrap reducers to automatically update the state based on subscriptions.

Usage

import { wrap, commit } from 'redux-meteor-subs';
import { createStore } from 'Redux';
import { Todos } from '../imports/api/todos'; // the todos collection

const todosReducer = (state = [], action) => {
  // the reducer function to wrap around
};

const wrappedTodosReducer = wrap(
  todosReducer,
  {
    name: 'todos.public',
    getData: () => Todos.find({}).fetch(),
  }
);

const store = createStore(wrappedTodosReducer);
commit(store.dispatch);

Explanation

1. Importing

import { wrap, commit } from 'redux-meteor-subs';
import { createStore } from 'Redux';
import { Todos } from '../imports/api/todos'; // the todos collection

• We first import wrap() and commit() functions from redux-meteor-subs.
• We then import the collection we want to work on: Todos.

2. Wrapping

const todosReducer = (state = [], action) => {
  // the reducer function to wrap around
};

const wrappedTodosReducer = wrap(
  todosReducer,
  {
    name: 'todos.public',
    getData: () => Todos.find({}).fetch(),
  }
);

• wrap() returns a new reducer that wraps around a given reducer. All the funcionality of the initial reducer is preserved. However, the new reducer will also automatically update the state whenever the subscribed data changes.
• The first argument for wrap() is the original reducer. This is just a regular reducer function that we would create normally.
• The second one is a configuration object that has 2 keys. The first key: name is the name of the publication. In our example, todos.public is the publication we want our todosReducer to subscribe to. The second key: getData() is a function that is used to replace the state.

3. Committing

const store = createStore(wrappedTodosReducer);
commit(store.dispatch);

• We pass our wrapped reducer into createStore(), just like we would pass any reducer.
• Finally, we pass store.dispatch into commit(). This is the last step we need to take to automatically dispatch actions that make the wrapped reducers update the state reactively on subscriptions.
• If you forget to commit, you will neither subscribe, nor dispatch the necessary action for your reducer to update the state.

Extra Example (Multiple Subscriptions)

import { wrap, commit } from 'redux-meteor-subs';
import { createStore, combineReducers } from 'Redux';
import { Todos } from '../imports/api/todos';
import { Posts } from '../imports/api/posts';

const todosReducer = (state = [], action) => {
  // a reducer function to wrap around
};

const postsReducer = (state = [], action) => {
  // another reducer function to wrap around
};

const wrappedTodosReducer = wrap(
  todosReducer,
  {
    name: 'todos.public',
    getData: () => Todos.find({}).fetch(),
  }
);

const wrappedPostsReducer = wrap(
  postsReducer,
  {
    name: 'posts.public',
    getData: () => Posts.find({}).fetch(),
  }
);

const appReducer = combineReducers({
  todos: wrappedTodosReducer,
  posts: wrappedPostsReducer,
});

const store = createStore(appReducer);
commit(store.dispatch);

In this example, the state is an object with keys todos and posts. Using the wrap() function, we have made the reducers responsible for these keys effectively update their states whenever there's a change in the subscribed data.