feat: data updater function for fetchable action

Author: Temzasse

README.md

@@ -652,6 +652,31 @@ const model = createModel({
 });
 ```
 
+The default behaviour for `fetchable.success` reducer is to always replace the whole `data` field with the action's payload, so under the hood the updater function is the following:
+
+```js
+const updater = (data, action) => action.payload;
+```
+
+However, often you don't simply want to replace the data field but insted merge it with the payload somehow. For these use cases it is possible to pass an updater function to the fetchable action as the third parameter. Note that you don't need to pass the reducer definition object if you don't need it - a simple `null` is just fine.
+
+```js
+const mergeUpdater = (data, action) => ({ ...data, ...action.payload });
+const appendUpdater = (data, action) => [...data, ...action.payload];
+
+const model = createModel({
+  state: {
+    ordersById: fetchable.value({}),
+    otherField: fetchable.value([]),
+  },
+  actions: () => ({
+    fetchOrders: fetchable.action('ordersById', null, mergeUpdater),
+    fetchOtherField: fetchable.action('otherField', null, appendUpdater),
+  }),
+  // ...
+});
+```
+
 In some cases your actions don't need to update the state in any way and you might just want to listen to the action in your sagas. For these cases Reducktion also provides a helper function `fetchable.noop()` that returns a no-op reducer so the action won't update the state but you can still the action type when setuping your saga watchers.
 
 If you need to access the fetchable action types also in your `reactions` you can do it in the following way:

example/typed/package-lock.json

@@ -5,28 +5,29 @@
   "dependencies": {
     "@types/jest": "^23.3.10",
     "@types/node": "^10.12.18",
-    "@types/react": "^16.7.17",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-redux": "^6.0.11",
-    "@types/redux-logger": "^3.0.6",
-    "@types/styled-components": "^4.1.4",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-redux": "^6.0.0",
-    "react-scripts": "2.1.1",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.3",
+    "@types/react-redux": "^7.0.5",
+    "@types/redux-logger": "^3.0.7",
+    "@types/styled-components": "^4.1.12",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-redux": "^6.0.1",
+    "react-scripts": "2.1.8",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
-    "redux-saga": "^0.16.2",
+    "redux-saga": "^1.0.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "styled-components": "^4.1.3",
-    "typescript": "^3.2.2"
+    "typescript": "^3.3.4000"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "install:clean": "rm -rf node_modules && npm install"
   },
   "eslintConfig": {
     "extends": "react-app"

example/typed/package.json

@@ -10,7 +10,7 @@ import {
   FetchableAction,
 } from 'reducktion';
 
-import { sleep } from '../../helpers';
+import { sleep, byIdUpdater } from '../../helpers';
 import { UserModel } from '../user/user.model';
 import { Order, Package } from './order.types';
 import { InitialState } from '../types';
@@ -20,7 +20,7 @@ export interface State {
   foo: number;
   bar: string;
   orders: FetchableValue<Order[]>;
-  packages: FetchableValue<Package[]>;
+  packagesById: FetchableValue<{ [id: string]: Package }>;
 }
 
 export interface Actions {
@@ -50,7 +50,7 @@ const model = createModel<State, Actions, Selectors, Deps>({
     foo: 1,
     bar: 'lol',
     orders: fetchable.value([]),
-    packages: fetchable.value([]),
+    packagesById: fetchable.value({}),
   },
   actions: ({ initialState }) => ({
     // Basic actions
@@ -62,7 +62,7 @@ const model = createModel<State, Actions, Selectors, Deps>({
 
     // Fetchable actions
     saveCreditCard: fetchable.action(),
-    fetchPackages: fetchable.action('packages'),
+    fetchPackages: fetchable.action('packagesById', null, byIdUpdater),
     fetchOrders: fetchable.action('orders', {
       // Define custom reducer for different statuses
       loading: state => ({ ...state, bar: 'loading' }),
@@ -104,13 +104,13 @@ const model = createModel<State, Actions, Selectors, Deps>({
 function* fetchOrdersSaga(action: any): any {
   console.log({ action });
   try {
-    yield put(model.actions.saveCreditCard())
+    yield put(model.actions.saveCreditCard());
     yield sleep(1000);
-    yield put(model.actions.saveCreditCard.fail('Failed to save card'))
+    yield put(model.actions.saveCreditCard.fail('Failed to save card'));
     yield sleep(1000);
-    yield put(model.actions.saveCreditCard.success())
+    yield put(model.actions.saveCreditCard.success());
     yield sleep(1000);
-    yield put(model.actions.saveCreditCard.clear())
+    yield put(model.actions.saveCreditCard.clear());
 
     // Select the fetchable value
     const x = yield select(model.selectors.getSomethingComplex);
@@ -138,6 +138,16 @@ function* fetchOrdersSaga(action: any): any {
 
     yield sleep(2000);
     yield put(model.actions.fetchOrders.clear());
+
+    yield put(
+      model.actions.fetchPackages.success([
+        { id: 'pkg1', name: 'Mock package 1' },
+        { id: 'pkg2', name: 'Mock package 2' },
+        { id: 'pkg3', name: 'Mock package 3' },
+        { id: 'pkg4', name: 'Mock package 4' },
+      ])
+    );
+
   } catch (error) {
     console.log('FAIL!', error);
     yield put(model.actions.fetchOrders.fail('Could not load orders!'));

example/typed/src/components/order/order.model.ts

@@ -7,5 +7,6 @@ export interface Order {
 }
 
 export interface Package {
+  id: string;
   name: string;
 }

example/typed/src/components/order/order.types.ts

@@ -1,2 +1,18 @@
 export const sleep = (ms = 500): Promise<void> =>
   new Promise(resolve => setTimeout(resolve, ms));
+
+export interface IdMapped<T> {
+  [id: string]: T;
+}
+
+export const byId = (arr: any[]) => {
+  return arr.reduce((acc: any, val: any) => {
+    acc[val.id] = val;
+    return acc;
+  }, {});
+};
+
+export const byIdUpdater = (data: any, action: any) => ({
+  ...data,
+  ...byId(action.payload),
+});

example/typed/src/helpers.ts

@@ -14,8 +14,18 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "typeRoots": [ "./typings", "./node_modules/@types"]
+    "types": [
+      "node",
+      "jest",
+      "react",
+      "react-dom",
+      "react-redux",
+      "redux-logger",
+      "styled-components",
+      "./typings/reducktion"
+    ],
+    "lib": ["dom", "dom.iterable", "esnext"]
   },
   "include": ["src"],
-  "exclude": ["node_modules", "typings"]
+  "exclude": ["node_modules"]
 }

example/typed/tsconfig.json

@@ -43,7 +43,9 @@ declare module 'reducktion' {
     action: <State, K extends keyof State>(
       // Only allow state fields for fetchable values
       stateField?: FetchableValue extends State[K] ? K : never,
-      customReducers?: Partial<FetchableReducers<State>>
+      customReducers?: Partial<FetchableReducers<State>> | null,
+      // TODO: can we provide better types here?
+      dataUpdater?: (data: any, action: any) => any
     ) => FetchableReducers<State>;
     noop: () => NoopReducer;
   }