redcr

Redcr (pronounced redka like the British town) is an experimental alternative to Immer.

👉  Try the online REPL 👈

Redux reducers require you to update your state in an immutable way, by creating a copy of the previous state with any changes applied. In mordern JavaScript, this can involve a tonne of spread operators. It's difficult to read and write a reducer in this way.

Immer takes a runtime approach to solving this problem which has a performance impact approximately 2-6 times worse than a handwritten reducer, and involves shipping an additional dependency to clients.

Redcr works at compile-time by automatically converting any reducer wrapped in redcr(...) to use immutable operations instead of mutable ones. Redcr has no impact on runtime bundle size, and theoretically has comparable performance to a handwritten reducer.

For example, this reducer

import { redcr } from 'redcr';

const myReducer = redcr((state: State) => {
    state.child.str = 'new';
    state.array.push(1);
    state.anotherArray.pop();
});

will be automatically converted to something like this (the exact output depends on what ES version you're targeting) when the code is compiled to JavaScript:

const myReducer = (state) => {
    return {
        ...state,
        child: {
            ...parent.child,
            str: 'new'
        },
        array: [...state.array, 1]
        annotherArray: state.anotherArray.slice(0, state.anotherArray.length - 1)
    };
};

💿 Install

Redcr works by using TypeScript compiler transforms. Even though this is a native TypeScript feature, it's not yet exposed publically. You need ttypescript which is a smaller wrapper around TypeScript which exposes that feature.

npm install --save-dev redcr ttypescript

Follow ttypescript's setup for the specific tools you're using. There is different configuration for Webpack, Rollup, Jest, etc but mostly they're just 1 or 2 lines of configuration to re-point the compiler.

Then in your tsconfig.json add the transformation:

{
    "compilerOptions": {
        "plugins": [
            { "transform": "redcr/transform" },
        ]
    }
}

📙 Supported operations

Type	Example
Assignment	foo.bar = 123
Bracket syntax	foo['bar'] = 123
String concatenation	foo.bar += 'hello'
Delete operator	delete foo.bar
Array access by index	foo.arr[0] = 123
Array.push	foo.arr.push(123)
Array.pop	foo.arr.pop()
Array.shift	foo.arr.shift()
Array.unshift	foo.arr.unshift(123)
Conditional mutation	if (condition) foo.bar = 123
Local variables	let tmp = 3; foo.bar = tmp;
Increment/decrement	foo.num++; foo.bar--;

See proposed features

📝 Contributing

Contributions are welcome. Bug reports and use-cases are just as valuable as PRs. All code changes must be accompanied by tests.