WP API integration for a Redux based Application
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
webpack.config.js

README.md

redux-wpapi

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.

Installation

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 },
  applyMiddleware(middleware)
);

Usage

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
      'HomePagePosts',
      // A callback where wpapi instance is injected
      api =>
      api.posts()
      .page(props.page)
      .perPage(props.perPage)
    );
  }

  componentWillMount() {
    HomePage.loadData(this.props);
  }

  componentWillReceiveProps(props) {
    HomePage.loadData(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 (
      <div>
        {!posts.length ? <NoPostFound /> : <PostList posts={posts} />}
      </div>
    );
  }
}

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

Contributions

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.