> For the complete documentation index, see [llms.txt](https://neue-moderne.gitbook.io/redux-sands/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://neue-moderne.gitbook.io/redux-sands/api-1/add.md).

# add

The function `add` is responsible for building your wrapper to actually do some stuff. Every `add` returns the instance, so you can nicely chain your additions.

Every `add`-call only takes an object which itself only has a single root-key, thus limiting each addition to one specific task. Here is a list of all possible add-params:

## add({ initState: })

Define a default state for redux. Has to be provided. Same as in every standard reducer used with redux.

```javascript
// Example:

import ReduxWrapper from "redux-sands";

const wrapper = new ReduxWrapper({ called: "demo" });
wrapper.add({ initState: { count: 0 } });

//...
```

## add({ component: })

Define the React-component for this wrapper. Not necessary if already done during init.

```javascript
// Example (using ES6):

import ReduxWrapper from "redux-sands";
import component from "./component";

const wrapper = new ReduxWrapper({ called: "demo" });
wrapper.add({ initState: { count: 0 } });
wrapper.add({ component });

//...
```

## add({ reducer: })

{% hint style="info" %}
**This call has a shorthand version,** [**see next listing**](/redux-sands/api-1/add.md#add-reducername)**.**

If you want to, you can use this extensive version, but the short one is recommanded, which saves you the `reducer` keyword and in case it's a plain reducer without saga, also saves the `fn` key.
{% endhint %}

Add a new reducer. You define a reducer by providing its name as the next key after `reducer`. The name-key itself has two possible children:

{% tabs %}
{% tab title="fn" %}
The reducer function, just as you know from standard redux.

* takes `(state, action)` as function-params
* has to return a state-copy, as it's usually done by redux

```javascript
// Example:

import ReduxWrapper from "redux-sands";
import component from "./component";

const wrapper = new ReduxWrapper({ called: "demo", component });

wrapper.add({
  reducer: {
    update: {
      fn: (state, action) => ({ ...state, ...action })
    }
  }
})

// ...
```

{% endtab %}

{% tab title="withSaga" %}
Provide an additional saga-listener.

* has only one children, which itself is a key, too: Represents one of saga's helper-functions, `takeEvery`, `takeLatest`, `throttle`, provided as string. The mapping to the correct function gets done by the wrapper
* the effect-name-key has the usual saga-generator as child

{% hint style="success" %}

#### What's that `result` in action?

The action passed to the generator contains a param `result`. You have to provide its contents to `put`, else the saga can't be handled correctly. Specifically, `result` contains the param `type`, thus enabling the reducer to be called after the dispatch.

Furthermore, the `action` contains all effects-creators required to actually work with saga.
{% endhint %}

The next two following examples demonstrate how to use `withSaga`, without specifying which saga effects to use. As default, the following effects are provided with `action`:

* `put`
* `take`
* `call`

### Example (long version)

```javascript
import ReduxWrapper from "redux-sands";
import component from "./component";

const wrapper = new ReduxWrapper({ called: "demo", component });

wrapper.add({
  reducer: {
    update: {
      fn: (state, action) => ({ ...state, ...action }),
      withSaga: {
        takeEvery: function*(action) {
          // action also contains 'call', 'take'.
          const { result, put, url } = action;
          try {
            const data = yield fetch(url);
            
            // Important:
            // Provide the contents of 'result'.
            yield put({ ...result, data });
          } catch (e) {
            yield put({ ...result, error: e });
          }
        }
      }
    }
  }
});

export default wrapper.connection;
export const reducer = wrapper.reducer;
export const saga = wrapper.saga;
```

### Example (shorter version)

```javascript
import ReduxWrapper from "redux-sands";
import component from "./component";

const wrapper = new ReduxWrapper({ called: "demo", component });

wrapper.add({
  reducer: {
    update: {
      fn: (state, action) => ({ ...state, ...action }),
      withSaga: {
        takeEvery: function*(action) {
          const { result, put, url } = action;
          try {
            const data = yield fetch(url);
            yield put({ ...result, data });
          } catch (e) {
            yield put({ ...result, error: e });
          }
        }
      }
    }
  }
});


// ...
```

####

#### Select effects with `andEffects`

As mentioned earlier, you can also specify which effcts to use. All that's necessary is a second key named `andEffects` in `withSaga`, after the saga-helper-key, holding an array of strings with the effect-names as value.

```javascript
// ...

wrapper.add({
  update: {
      fn: (state, action) => ({ ...state, ...action }),
      withSaga: {
        takeEvery: function*(action) {
        
          // action now contains 'put', 'take', 'flush'.
          const { result, put, url } = action;
          try {
            const data = yield fetch(url);
            yield put({ ...result, data });
          } catch (e) {
            yield put({ ...result, error: e });
          }
        },
        andEffects: ["put", "take", "flush"]
      }
    }
});

// ...
```

{% endtab %}
{% endtabs %}

## **add({ \[reducerName]: })**

{% hint style="info" %}
Recommend way. Shortest version to add a reducer (and optional saga).
{% endhint %}

When none of the keys above is provided, it's assumed you're providing a reducer in the shorthand version. Therefore, the key describes the reducer name and its child represents the reducer-functions itself. This is the shortest way possible to add a reducer.

#### Simple reducer

```javascript
import ReduxWrapper from "redux-sands";
import component from "./component";

const wrapper = new ReduxWrapper({ called: "demo", component });

wrapper.add({ update: (state, action) => ({ ...state, ...action }) });
wrapper.add({ update: (state, { count }) => ({ ...state, count }) });

export default wrapper.connection;
export const reducer = wrapper.reducer
```

#### Reducer with saga

```javascript
//...

wrapper.add({
  update: {
    fn: (state, { count }) => ({ ...state, count }),
    withSaga: {
      takeEvery: function*(action) {
        const { result, put } = action;
        yield put({ ...result });
      },
      andEffects: ["put"]
    }
  }
});

export default wrapper.connection;
export const reducer = wrapper.reducer
export cons saga = wrapper.saga;
```