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.

// 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.

// 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: })

This call has a shorthand version, see next listing.

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.

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:

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

// 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 })
    }
  }
})

// ...

withSaga

add({ [reducerName]: })

Recommend way. Shortest version to add a reducer (and optional saga).

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

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

//...

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;