How to build a React-Redux application with API-first CMS Contentful

How to build a #ReactJS #Redux application with API-first CMS Contentful:  #JavaScript

  • js with the followingreturn ( div{this.props.children}/div );Now go to the browser, refresh the page and see the changes.Fetch blog contentsNext we’ll integrate with Contentful so we can fetch and show blog posts dynamically.Steps to setup your Contentful accountSignup at Contentful (you can choose Free package, that will be sufficient for now) and create an empty space.Create a new Content Type and add few fields to it.
  • js file and use axios to make a GET request to Contentful server.import axios from ‘axios’;export const FETCH_POSTS = ‘FETCH_POSTS’;const API_BASE_URL = API_SPACE_ID = ‘buyxxxxxxx’;const API_TOKEN = function fetchPosts() { const request = return { type: FETCH_POSTS, payload: request };}fetchPosts action creator will return an action , which is nothing but a plain JavaScript object with a type property.
  • /actions/index’;const INITIAL_STATE = { all: [] };export default function(state = INITIAL_STATE, action) { switch(action.type) { case FETCH_POSTS: return { …state, all: action.payload.data.items }; default: return state; }}Next we will update the application state in .
  • /posts_reducer’;const rootReducer = combineReducers({ posts: PostsReducer});export default rootReducer;Displaying postsTo get our app working, now we’ll promote the PostsIndex component to a Redux container in .
  • /actions/index’;class PostsIndex extends Component { componentWillMount() { this.props.fetchPosts(); } renderPosts() { return this.props.posts.map((post, index) = { return ( article key={post.sys.id} h3{post.fields.title}/h3 p{post.fields.description}/p /article ); }); } render() { return ( div h2Blog Posts/h2 {this.renderPosts()} /div ); }}function mapStateToProps(state) { return { posts: state.posts.all };}export default connect(mapStateToProps, { fetchPosts })(PostsIndex);Then go to the browser, refresh the page and check the results.Now the existing UI may look very dull, only few headlines followed by some paragraphs.

When I first started to re-design my company website I was very excited to use ReactJS to build the front-end application in the React way. But soon I realised, in the excitement of using the new JS…

@ReactiveConf: How to build a #ReactJS #Redux application with API-first CMS Contentful: #JavaScript

When I first started to re-design my company website I was very excited to use ReactJS to build the front-end application in the React way. But soon I realised, in the excitement of using the new JS library I completely forgot about the content part. Who will send me dynamic contents?

And seriously this time I was not in a mood to develop a backend app with Rails or NodeJS. Rather I wanted someone else to handle the role of a typical Content Management System (CMS).

The idea is very simple! There will be a CMS who will serve data through APIs and we will consume those API data in our React application.

While I was looking for a ready-made CMS, I came across Contentful. Contentful is a API-first CMS and they says ‘Editors get a CMS, Developers don’t have to deal with one’.

And we will manage our application’s data flow with Redux. Redux maintains the state of an entire application in a single immutable state tree (object), which can’t be changed directly. When something changes, a new object is created (using actions and reducers).

So Let’s get our hands dirty with a small blog application powered by — — React-Redux-Contentful.

We can start by creating a project folder and initializing a `package.json` file with `npm init`. But to speed up initial setup I’ve created that for you. Just simply follow the github link and checkout the repo.

After checkout go to the project folder and install the dependencies with

and adding a basic React component.

import React, { Component } from ‘react’;

render() {

return

Our blog posts will come here.

;

export default PostsIndex;

import PostsIndex from ‘./components/posts_index’;

export default (

with the following

return (

{this.props.children}

Now go to the browser, refresh the page and see the changes.

Next we’ll integrate with Contentful so we can fetch and show blog posts dynamically.

file.

import promise from ‘redux-promise’;

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

to make a GET request to Contentful server.

import axios from ‘axios’;

export const FETCH_POSTS = ‘FETCH_POSTS’;

const API_BASE_URL = ‘https://cdn.contentful.com’;

const API_SPACE_ID = ‘buyxxxxxxx’;

const API_TOKEN = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;

return {

type: FETCH_POSTS,

payload: request

property. In Redux Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.

and handle the response we got from the action.

import { FETCH_POSTS } from ‘../actions/index’;

const INITIAL_STATE = { all: [] };

export default function(state = INITIAL_STATE, action) {

case FETCH_POSTS:

return { …state, all: action.payload.data.items };

default:

return state;

file.

import { combineReducers } from ‘redux’;

import PostsReducer from ‘./posts_reducer’;

posts: PostsReducer

export default rootReducer;

file.

import React, { Component } from ‘react’;

import { connect } from ‘react-redux’;

import { fetchPosts } from ‘../actions/index’;

this.props.fetchPosts();

return this.props.posts.map((post, index) => {

return (

return (

Blog Posts

{this.renderPosts()}

return { posts: state.posts.all };

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

Then go to the browser, refresh the page and check the results.

attribute to the HTML tags. And I leave that part to you.

React is a very powerful library that makes it easy to build universal apps. Supercharged with Redux and combined with Contentful, you can quickly develop CMS powered blogs and websites.

How to build a React-Redux application with API-first CMS Contentful