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: })
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:
The reducer function, just as you know from standard redux.
takes
(state, action)as function-paramshas 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 })
}
}
})
// ...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 wrapperthe effect-name-key has the usual saga-generator as child
What's that result in action?
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:
puttakecall
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
andEffectsAs 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]: })
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.reducerReducer 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;Last updated