feat: add fetchable.noop() for no-op reducers

Author: Temzasse

README.md

@@ -8,9 +8,9 @@ _A small helper library for Redux to reduce boilerplate and enforce a more modul
 
 <br>
 
-- 🦆 **Modular architecture with ducks pattern.**
-- 🔮 **Less boilerplate.**
-- 💉 **Inject dependencies easily.**
+* 🦆 **Modular architecture with ducks pattern.**
+* 🔮 **Less boilerplate.**
+* 💉 **Inject dependencies easily.**
 
 <br>
 
@@ -20,18 +20,18 @@ Inspiration: [models: Redux Reducer Bundles](https://github.com/erikras/models-m
 
 ---
 
-- [Getting started](#getting-started)
-  - [Installation](#installation)
-  - [The Idea](#the-idea)
-  - [Usage](#usage)
-- [Dependency injection](#dependency-injection)
-- [Usage with redux-thunk](#usage-with-redux-thunk)
-- [Usage with redux-saga](#usage-with-redux-saga)
-- [Example with everything](#example-with-everything)
-- [Advanced](#advanced)
-- [API](#api)
-- [Other similar libraries](#other-similar-libraries)
-- [Caveats](#caveats)
+* [Getting started](#getting-started)
+  * [Installation](#installation)
+  * [The Idea](#the-idea)
+  * [Usage](#usage)
+* [Dependency injection](#dependency-injection)
+* [Usage with redux-thunk](#usage-with-redux-thunk)
+* [Usage with redux-saga](#usage-with-redux-saga)
+* [Example with everything](#example-with-everything)
+* [Advanced](#advanced)
+* [API](#api)
+* [Other similar libraries](#other-similar-libraries)
+* [Caveats](#caveats)
 
 # reducktion
 
@@ -653,7 +653,9 @@ const model = createModel({
 });
 ```
 
-If you need to access the API action types eg. in `reactions` or in `sagas` you can do it in the following way:
+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:
 
 ```js
 const model = createModel({
@@ -694,7 +696,7 @@ const fetchablePropType = (dataPropType, errPropType = PropTypes.string) => {
 // Using the helper
 const propsTypes = {
   balanceItems: fetchablePropType(PropTypes.array.isRequired),
-}
+};
 ```
 
 ## API
@@ -703,8 +705,8 @@ const propsTypes = {
 
 ## Other similar libraries
 
-- [Redux Bundler](https://reduxbundler.com/)
-- [List of various ducks pattern libs](https://github.com/erikras/models-modular-redux#implementation)
+* [Redux Bundler](https://reduxbundler.com/)
+* [List of various ducks pattern libs](https://github.com/erikras/models-modular-redux#implementation)
 
 ## Caveats
 

example/typed/src/components/user/LoginForm.tsx

@@ -22,8 +22,6 @@ class LoginForm extends React.Component<Props, State> {
   };
 
   handleChange = (e: React.FormEvent<HTMLInputElement>) => {
-    // TODO: not sure how to type this dynamic state update trick for forms...
-    // We should probably use separate setter methods for each form field?
     const newState = { [e.currentTarget.name]: e.currentTarget.value } as any;
     this.setState(newState);
   };

example/typed/src/components/user/index.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { FetchableValue } from 'reducktion';
 
+import { RootState } from '../../init';
 import userModel from './user.model';
 import LoginForm from './LoginForm';
 import Profile from './Profile';
@@ -59,7 +60,7 @@ const LogoutButton = styled.button`
 const { selectors, actions } = userModel;
 
 export default connect(
-  state => ({
+  (state: RootState) => ({
     isAuthenticated: selectors.get('isAuthenticated')(state),
     profile: selectors.get('profile')(state),
   }),

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

@@ -15,9 +15,10 @@ export interface State {
   profile: FetchableValue<Profile | null>;
 }
 
-export interface Actions {
+interface Actions {
   login: FetchableAction<Profile>;
   logout: () => any;
+  deleteUser: () => any;
 }
 
 const model = createModel<State, Actions>({
@@ -27,13 +28,17 @@ const model = createModel<State, Actions>({
     isAuthenticated: false,
   },
   actions: ({ initialState }) => ({
+    deleteUser: fetchable.noop(),
     login: fetchable.action('profile', {
       success: state => ({ ...state, isAuthenticated: true }),
       failure: state => ({ ...state, isAuthenticated: false }),
     }),
     logout: () => ({ ...initialState }),
   }),
-  sagas: ({ types }) => [takeEvery(types.login, loginSaga)],
+  sagas: ({ types }) => [
+    takeEvery(types.login, loginSaga),
+    takeEvery(types.deleteUser, deleteUserSaga),
+  ],
 });
 
 // Saga handlers
@@ -62,6 +67,10 @@ function* loginSaga(action: any): any {
   }
 }
 
+function* deleteUserSaga(action: any): any {
+  yield console.log('Do something');
+}
+
 export type UserModel = typeof model;
 
 export default model;

example/typed/src/init.ts

@@ -1,12 +1,17 @@
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
+import { createStore, applyMiddleware, combineReducers, compose, DeepPartial } from 'redux';
 import { all } from 'redux-saga/effects';
 import createSagaMiddleware from 'redux-saga';
 import logger from 'redux-logger';
 import thunk from 'redux-thunk';
 import { initModels } from 'reducktion';
 
-import orderModel from './components/order/order.model';
-import userModel from './components/user/user.model';
+import orderModel, { OrderModel } from './components/order/order.model';
+import userModel, { UserModel } from './components/user/user.model';
+
+export interface RootState {
+  order: OrderModel;
+  user: UserModel;
+}
 
 const models = initModels([orderModel, userModel]);
 const rootReducer = combineReducers(models.allReducers);
@@ -22,7 +27,7 @@ const enhancer = composeEnhancers(
   applyMiddleware(sagaMiddleware, thunk, logger)
 );
 
-export default function configureStore(initialState = undefined) {
+export default function configureStore(initialState?: DeepPartial<RootState>) {
   const store = createStore(rootReducer, initialState, enhancer);
   sagaMiddleware.run(rootSaga);
   return store;

example/typed/typings/reducktion/index.d.ts

@@ -4,9 +4,8 @@ declare module 'reducktion' {
     ? A
     : never;
 
-  // TODO: do we need this?
-  interface RootState<StatePart> {
-    [statePart: string]: StatePart;
+  interface RootState {
+    [statePart: string]: any;
   }
 
   // Provide action keys for auto-complete but allow custom types
@@ -41,13 +40,16 @@ declare module 'reducktion' {
     failure: Reducer<State>;
   }
 
+  type NoopReducer = (state: any) => any;
+
   interface Fetchable {
     value: <T>(val: T) => FetchableValue<T>;
     action: <State, K extends keyof State>(
       // Only allow state fields for fetchable values
       stateField: FetchableValue extends State[K] ? K : never,
       customReducers?: Partial<FetchableReducers<State>>
     ) => FetchableReducers<State>;
+    noop: () => NoopReducer;
   }
 
   // TODO:
@@ -65,7 +67,7 @@ declare module 'reducktion' {
         ? FetchableReducers<State>
         : Actions[K] extends Function
         ? Reducer<State, ArgumentType<Actions[K]>>
-        : never
+        : never;
     };
     reactions?: (
       { initialState, deps }: { initialState: State; deps: Deps }
@@ -92,7 +94,7 @@ declare module 'reducktion' {
     selectors: Selectors & {
       get: <K extends keyof State>(
         stateField: K
-      ) => (state: RootState<State>, ...args: any[]) => Pick<State, K>[K];
+      ) => (state: RootState, ...args: any[]) => Pick<State, K>[K];
     };
     getSagas: () => [];
     getReducer: () => Reducer<any>;

reducktion.test.js

@@ -7,7 +7,7 @@ import {
 
 // TODO: fix tests related to auto-generated selectors!
 
-describe('fetchable/fetchable.action', () => {
+describe('fetchable', () => {
   it('should create fetchable value', () => {
     const f = fetchable.value([]);
     expect(f.data).toEqual([]);
@@ -25,6 +25,12 @@ describe('fetchable/fetchable.action', () => {
     expect(fa2.args[0]).toEqual('orders');
     expect(fa2.args[1].loading).toBeInstanceOf(Function);
   });
+
+  it('should create fetchable no-op reducer', () => {
+    const reducer = fetchable.noop();
+    const state = { test: 1, test2: 2 };
+    expect(reducer(state)).toEqual(state);
+  });
 });
 
 describe('createModel', () => {

src/reducktion.d.ts

@@ -3,9 +3,8 @@ type ArgumentType<F extends Function> = F extends (arg: infer A) => any
   ? A
   : never;
 
-// TODO: do we need this?
-interface RootState<StatePart> {
-  [statePart: string]: StatePart;
+interface RootState {
+  [statePart: string]: any;
 }
 
 // Provide action keys for auto-complete but allow custom types
@@ -40,13 +39,16 @@ interface FetchableReducers<State> {
   failure: Reducer<State>;
 }
 
+type NoopReducer = (state: any) => any;
+
 interface Fetchable {
   value: <T>(val: T) => FetchableValue<T>;
   action: <State, K extends keyof State>(
     // Only allow state fields for fetchable values
     stateField: FetchableValue extends State[K] ? K : never,
     customReducers?: Partial<FetchableReducers<State>>
   ) => FetchableReducers<State>;
+  noop: () => NoopReducer;
 }
 
 // TODO:
@@ -64,7 +66,7 @@ interface ModelDefinition<State, Actions, Selectors, Deps> {
       ? FetchableReducers<State>
       : Actions[K] extends Function
       ? Reducer<State, ArgumentType<Actions[K]>>
-      : never
+      : never;
   };
   reactions?: (
     { initialState, deps }: { initialState: State; deps: Deps }
@@ -91,7 +93,7 @@ interface Model<State, Actions, Selectors> {
   selectors: Selectors & {
     get: <K extends keyof State>(
       stateField: K
-    ) => (state: RootState<State>, ...args: any[]) => Pick<State, K>[K];
+    ) => (state: RootState, ...args: any[]) => Pick<State, K>[K];
   };
   getSagas: () => [];
   getReducer: () => Reducer<any>;

src/reducktion.js

@@ -193,4 +193,7 @@ export const fetchable = {
     [FETCHABLE_ACTION_IDENTIFIER]: true,
     args,
   }),
+
+  // No-op reducer for cases when an action does not update state
+  noop: () => state => state,
 };