<commit_before># redux-crud-store - a reusable API for syncing models with a backend

[![NPM Version](https://img.shields.io/npm/v/redux-crud-store.svg?style=flat)](https://www.npmjs.com/package/redux-crud-store)
[![NPM Downloads](https://img.shields.io/npm/dm/redux-crud-store.svg?style=flat)](https://www.npmjs.com/package/redux-crud-store)


Making a single page application (SPA)? Using a Redux store?

This module contains helper functions to make it easier to keep your models in sync with a backend. In particular, it provides these four things:

1. **It handles async for you**, using redux-saga. A middleware will watch for your async send actions, and will dispatch the success/error actions when the call is complete.
2. It implements a **default reducer for all of your backend models**. This reducer will handle your async send, success, and failure actions, and store them in your redux store in an intelligent way.
3. You can **quickly write action creators** for this reducer using the predefined constants and action creators exported by redux-crud-store.
4. It provides **selector functions for your components**, which query the store and return a collection of models, a single model, or an object saying "wait for me to load" or "you need to dispatch another fetch action"

# How to use it

See [docs/API.md](https://github.com/uniqueway/redux-crud-store/blob/master/docs/API.md) for usage.

There are four ways to integrate redux-crud-store into your app:

1. Set up a redux-saga middleware
2. Add the reducer to your store
3. Create action creators for your specific models
4. Use redux-crud-store's selectors and your action creators in your components

### 1. Set up a redux-saga middleware

The first step is to import ApiClient and crudSaga from redux-crud-store, which will automate async tasks for you. If your app uses JSON in requests, all you need to do is provide a basePath for the ApiClient, which will be prepended to all of your requests. (See [ApiClient.js](https://github.com/uniqueway/redux-crud-store/blob/master/src/ApiClient.js) for more config options). Once you've done that, you can create a redux-saga middleware and add it to your redux store using this code:

    import { createStore, applyMiddleware, compose } from 'redux'
    import createSagaMiddleware from 'redux-saga'

    import { crudSaga, ApiClient } from 'redux-crud-store'

    const client = new ApiClient({ basePath: 'https://example.com/api/v3/' })
    const crudMiddleware = createSagaMiddleware()

    const createStoreWithMiddleware = compose(
      applyMiddleware(
        crudMiddleware
        // add other middlewares here...
      )
    )(createStore)
    crudMiddleware.run(crudSaga(client))

    // then use createStoreWithMiddleware as you like

This requires fetch API support. If your clients won't support the fetch API, you will need to [write your own ApiClient](https://github.com/uniqueway/redux-crud-store/blob/feature/api-client/docs/Sample-Api-Client-with-Superagent.md).

### 2. Add the reducer to your store

If you like combining your reducers in one file, here's what that file might look like:

    import { combineReducers } from 'redux'
    import { crudReducer } from 'redux-crud-store'

    export default combineReducers({
      models: crudReducer,
      // other reducers go here
    })

### 3. Create action creators for your specific models
<commit_msg>update api basepath to remove trailing slash<commit_after># redux-crud-store - a reusable API for syncing models with a backend

[![NPM Version](https://img.shields.io/npm/v/redux-crud-store.svg?style=flat)](https://www.npmjs.com/package/redux-crud-store)
[![NPM Downloads](https://img.shields.io/npm/dm/redux-crud-store.svg?style=flat)](https://www.npmjs.com/package/redux-crud-store)


Making a single page application (SPA)? Using a Redux store?

This module contains helper functions to make it easier to keep your models in sync with a backend. In particular, it provides these four things:

1. **It handles async for you**, using redux-saga. A middleware will watch for your async send actions, and will dispatch the success/error actions when the call is complete.
2. It implements a **default reducer for all of your backend models**. This reducer will handle your async send, success, and failure actions, and store them in your redux store in an intelligent way.
3. You can **quickly write action creators** for this reducer using the predefined constants and action creators exported by redux-crud-store.
4. It provides **selector functions for your components**, which query the store and return a collection of models, a single model, or an object saying "wait for me to load" or "you need to dispatch another fetch action"

# How to use it

See [docs/API.md](https://github.com/uniqueway/redux-crud-store/blob/master/docs/API.md) for usage.

There are four ways to integrate redux-crud-store into your app:

1. Set up a redux-saga middleware
2. Add the reducer to your store
3. Create action creators for your specific models
4. Use redux-crud-store's selectors and your action creators in your components

### 1. Set up a redux-saga middleware

The first step is to import ApiClient and crudSaga from redux-crud-store, which will automate async tasks for you. If your app uses JSON in requests, all you need to do is provide a basePath for the ApiClient, which will be prepended to all of your requests. (See [ApiClient.js](https://github.com/uniqueway/redux-crud-store/blob/master/src/ApiClient.js) for more config options). Once you've done that, you can create a redux-saga middleware and add it to your redux store using this code:

    import { createStore, applyMiddleware, compose } from 'redux'
    import createSagaMiddleware from 'redux-saga'

    import { crudSaga, ApiClient } from 'redux-crud-store'

    const client = new ApiClient({ basePath: 'https://example.com/api/v1' })
    const crudMiddleware = createSagaMiddleware()

    const createStoreWithMiddleware = compose(
      applyMiddleware(
        crudMiddleware
        // add other middlewares here...
      )
    )(createStore)
    crudMiddleware.run(crudSaga(client))

    // then use createStoreWithMiddleware as you like

This requires fetch API support. If your clients won't support the fetch API, you will need to [write your own ApiClient](https://github.com/uniqueway/redux-crud-store/blob/feature/api-client/docs/Sample-Api-Client-with-Superagent.md).

### 2. Add the reducer to your store

If you like combining your reducers in one file, here's what that file might look like:

    import { combineReducers } from 'redux'
    import { crudReducer } from 'redux-crud-store'

    export default combineReducers({
      models: crudReducer,
      // other reducers go here
    })

### 3. Create action creators for your specific models

{'fraction_non_alphanumeric': 0.08613629716291313, 'fraction_numerical': 0.0035097981866042704, 'mean_word_length': 3.970203488372093, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 16, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1477403', 'n_tokens_mistral': 2017, 'n_tokens_neox': 1963, 'n_words': 822}