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

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

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.

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)

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)

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.

// ...

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"]
      }
    }
});

// ...

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;