WP API integration for a Redux based Application
Latest commit 448ae9c Dec 2, 2016 @edygar edygar Fix changelog format



npm version Build Status

A node-wpapi integration for a Redux based Application.

How it Works

This library exposes node-wpapi instance through the actionCreator callAPI. The resulting action is interpreted in the middleware, doing so by resolving the request and controlling the reducer through actions.


npm install --save redux-wpapi

Then, to enable ReduxWPAPI, use applyMiddleware() and combineReducers():

import reducers from './reducers';
import ReduxWPAPI from 'redux-wpapi';

const { reducer: wp, middleware } = new ReduxWPAPI({ /**/ });
const store = createStore(
  // the reducer must be placed at the root of the state as `wp`
  // so the selector knows where state lives in
  { ...reducers, wp },


import React from 'react';
import { wp, selectRequest, ResponseStatus } from 'redux-wpapi';
import { connect } from 'react-redux';

export class HomePage extends React.Component {
  static loadData(props) {
    return props.callAPI(
      // The name where the request state will be placed
      // A callback where wpapi instance is injected
      api =>

  componentWillMount() {

  componentWillReceiveProps(props) {

  render() {
    const { status, data: posts } = this.props.request;

    if (!posts) {
      switch (status) {
          case ResponseStatus.pending: return <div>Loading…</div>;
          case ResponseStatus.rejected: return <div>An error has occurred</div>;

    return (
        {!posts.length ? <NoPostFound /> : <PostList posts={posts} />}

export default connect({
  request: selectRequest('HomePagePosts'),
}, { callAPI })(HomePage);


All contributions are welcome, and very much appreciated.

We are preparing some helper documents to facilitate the process (hopefully), but for now we're following the these guidelines:

  • Be reasonable
  • Give as much detailed information as you can
  • Keep it as short as possible
  • Let the code talk

Must have's

Every Pull Request must have the following:

  • Unit tests for any functionality that's exposed to the end user.
  • An entry in the CHANGELOG.md file.