huan/ducks

Reducer Bundles Manager for Redux, Implemented the Ducks Modular Proposal

ducks's Issues

Protect String Literal Types in Action Types

When we define the redux action types in ducks, we will store them in a types.ts file:

const TEST = 'module/TEST'

Use export const TEST

And use import * as types from './types' in other TS module to import all the types.

In this way, the TEST can keep the string literal type as module/TEST, which is necessary for future usage.

Do NOT use export default { TEST }

In this way, the typeof TEST will become string, which will lose its string literal type.

If it lists its string literal type, then it seems more likely will cause the problem in future usage.

References

Using string constants as action type property:

please make sure to use simple string literal assignment with const. This limitation is coming from the type-system, because all the dynamic string operations (e.g. string concatenation, template strings and also object used as a map) will widen the literal type to its super-type, string. As a result this will break contextual typing for action object in reducer cases.

Property 'payload' is missing in type 'AnyAction'

Minimum reproducible code snip:

import { Reducer, AnyAction } from 'redux'

type MyAction = {
  payload: number,
  type: 'TAP',
}

const f: Reducer<any, MyAction> = (s: any, ..._: any[]) => s
const r: Reducer<any, AnyAction> = f
// r is NOT ok.
void r

The error message of r is:

Type 'Reducer<any, MyAction>' is not assignable to type 'Reducer<any, AnyAction>'.
  Types of parameters 'action' and 'action' are incompatible.
    Type 'AnyAction' is not assignable to type 'MyAction'.ts(2322)

However,

const a1: MyAction = {
  payload: 42,
  type: 'TAP',
}
const a2: AnyAction = a1
// a2 is OK
void a2

To be fixed.

Related Issues

• Redux Reducer type error microsoft/TypeScript#17154
• Regression: 2.4.1 Generic type mismatch microsoft/TypeScript#16985 (comment)
• Super-type of T is something like <U extends T> microsoft/TypeScript#16985 (comment)

import 'redux-saga/effects': CustomError: ERR_UNSUPPORTED_DIR_IMPORT

The Problem

When running under ES Modules mode:

$ node --no-warnings --loader=ts-node/esm ./src/ducks/ducks.spec.ts 
/Users/huan/git/huan/ducks/node_modules/ts-node/dist-raw/node-esm-resolve-implementation.js:379
    const err = new ERR_UNSUPPORTED_DIR_IMPORT(path, fileURLToPath(base));
                ^
CustomError: ERR_UNSUPPORTED_DIR_IMPORT /Users/huan/git/huan/ducks/node_modules/redux-saga/effects /Users/huan/git/huan/ducks/examples/ping-pong/sagas.ts

ducks/examples/ping-pong/sagas.spec.ts

Lines 22 to 25 in d96f35b

	import {
	takeEvery,
	put,
	} from 'redux-saga/effects'

The Workaround

To disable saga temporarily and will investigate in the future.

Promote the Ducks library

to let other developers inspect this convenience module and collect feedbacks.

Links:

• https://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/
• https://www.producthunt.com/posts/ducks
• https://news.ycombinator.com/item?id=30146823
• https://www.reddit.com/r/programming/comments/sgyyxi/reducer_bundles_manager_for_redux_implemented_the/

TODO:

• comment https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/
• comment https://www.youtube.com/watch?v=jr7D4VAzNig&t=960s

createMockStore is not a function

When running with ES Module mode, we have to:

import * as MOCK_STORE 'redux-mock-store'
const createMockStore = (MOCK_STORE.default as any).default as typeof MOCK_STORE.default

The above code will violate the Typing system (must use as any), but it works for the final code.

To be investigated.

Version

• "redux-mock-store": "^1.5.4"
• "@types/redux-mock-store": "^1.0.3"

Link to

• reduxjs/redux-mock-store#182