This library provides an implementation of the Contentful sync API for redux and reselect. contentful-redux
handles the complete synchronization workflow (including cyclic link resolution, localization, and incremental syncing) and lets you consume your contents from Contentful as easy-to-use selectors.
If you are not already familiar with redux (and reselect), you should familiarize yourself with those first before trying to integrate contentful-redux into your project.
contentful-redux
is provided as a collection of CommonJS modules, which can be installed using npm:
npm install --save contentful@5 contentful-redux
or using yarn:
yarn add contentful@5 contentful-redux
- Setup contentful-redux (
contentful.js
):
import { createClient } from 'contentful';
import contentfulRedux from 'contentfulRedux';
export const { actions, reducer, middleware, selectors } = contentfulRedux({
createClient,
space: 'YOUR_SPACE_ID',
accessToken: 'YOUR_ACCESS_TOKEN',
stateSelector: state => state.contentful
});
- Include the contentful reducer in your reducer:
import { combineReducers } from 'redux';
import { reducer as contentful } from './contentful';
export const reducer = combineReducers({
contentful,
// your other reducers
});
- Include the contentful middleware in your redux store configuration:
import { applyMiddleware, createStore } from 'redux';
import { middleware as contentful } from './contentful';
export const configureStore = () => {
return createStore(reducer, null, applyMiddleware(contentful));
};
- Derive your reselect selectors from the base selectors provided by contentful-redux:
import { createSelector } from 'reselect';
import { selectors } from './contentful';
export const myModelEntities = createSelector(
selectors.entries, selectors.contentTypes,
(entries, contentTypes) => entries.filter(each => each.__contentType__ === contentTypes.myModel)
);
- Dispatch a sync action whenever you want:
import { actions } from './contentful';
dispatch(actions.sync());
Option | Required | Default | Description |
---|---|---|---|
accessToken |
yes | - | Your contentful CDA access token |
clientParams |
no | {} |
Additional arguments to be passed to createClient |
createClient |
yes | - | The desired variant of the contentful.js client factory method |
localeSelector |
no | () => null |
A selector returning the locale to be used, e.g.(state) => state.currentLocale |
space |
yes | - | The id of the contentful space to by synced |
stateSelector |
yes | - | A selector returning the portion of the state which is managed by the contentful-redux reducer, e.g.(state) => state.contentful |
The following redux action creators are provided by contentful-redux
:
Argument | Required | Default | Description |
---|---|---|---|
spaceId |
no | options.space |
The id of the space to be synced. There must be a middleware installed wich is registered with the same space id |
The following reselect selectors are provided by contentful-redux
:
Selector | Returns | Description |
---|---|---|
assets |
array |
A list of all known assets in the contentful space |
contentTypes |
object |
A map from content type ids to the meta information about the corresponding content type |
defaultLocale |
object |
The locale which is defined as default of the contentful space |
entries |
array |
A list of all known entries in the contentful space |
isSyncing |
boolean |
true while a sync operation is in progress |
lastSync |
object |
Meta-information about the results of the last sync attempt |
locales |
array |
The locales which are defined for the contentful space |
space |
object |
Meta-information about your contentful space |
This software is licensed under the MIT License. View the license.
Copyright © 2018 Leo Schweizer