Package Exports

redux-api-actions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-api-actions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux-api-actions

Utilities for redux-api-middleware, redux-actions and react-redux.

Getting Started
- Installation
- Usage
Documentation

Getting Started

Installation

redux-api-actions is available on npm.

npm install --save redux-api-actions

Usage

Before use this library

Setup up redux-api-middleware
- See the full API documentation.
connect a React component to a Redux store.
- See the full API documentation

Defining the module

If you have something looks like this:

constants

const namespace = 'count';

export const NAMESPACE = namespace.toUpperCase();
export const TYPE_COUNT = NAMESPACE;
export const TYPE_COUNT_REQUEST = `${TYPE_COUNT}_REQUEST`;
export const TYPE_COUNT_SUCCESS = `${TYPE_COUNT}_SUCCESS`;
export const TYPE_COUNT_FAILURE = `${TYPE_COUNT}_FAILURE`;

export const endpoint = 'http://www.example.com/api/counter'

redux-actions

import { createActions, handleActions } from 'redux-actions';
import { TYPE_COUNT } from './constants';

const defaultState = { counter: 10 };
export const increment = createAction(TYPE_COUNT);

export const reducer = handleActions({
  [TYPE_COUNT]: state => state.update('counter', v => v + 1),
}, defaultState);

redux-api-middleware

import { handleActions } from 'redux-actions';
import { RSAA } from 'redux-api-middleware';
import {
  endpoint,
  TYPE_COUNT_REQUEST,
  TYPE_COUNT_SUCCESS,
  TYPE_COUNT_FAILURE,
} from './constants';

export const incrementRemote = amount => ({
  [RSAA]: {
    endpoint: `${endpoint}/${amount}`,
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'same-origin',
    types: [
      TYPE_COUNT_REQUEST,
      TYPE_COUNT_SUCCESS,
      TYPE_COUNT_FAILURE,
    ],
  },
});

export const reducer = handleActions({
  [TYPE_COUNT_SUCCESS]: (state, { payload: { amount } }) => state.update('counter', v => amount),
});

react-redux

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { NAMESPACE } from './constants';

const reduxActions = { increment, incrementRemote };

const mapStateToProps = store => ({ store: store[NAMESPACE] });
const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(reduxActions, dispatch) });
export const Container = connect(mapStateToProps, mapDispatchToProps)(Root);

Then, you can merge them into this gist:

redux-api-actions

import creator from 'redux-api-actions';
import { endpoint } from './constants';

const { Container, Reducer, NAMESPACE } = creator({
  namespace: 'count',
  state: { counter: 0 },
  component: Root,
  actions: {
    increment: {
      success: state => state.update('counter', v => v + 1),
    },
    incrementRemote: {
      endpoint,
      before: amount => ({ endpoint: `${endpoint}/${amount}` }),
      success: (state, { payload: { amount } }) => state.update('counter', v => amount),
    }
  },
});

Looks good, right?

Finally, merge your Reducer into your redux store as usual.

import { createStore, combineReducers } from 'redux';
const store = createStore(
  combineReducers({ ...Reducer }),
  initialState,
);

Documentation

Hey, I'm no good at Writting. So, please help me do this. And please help me add the test case.

License

MIT