Skip to content

log-oscon/redux-wpapi

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

WP API integration for a Redux based Application

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published