`channel.setState` @@SET Tag Usage

Note: The following is also wholly applicable to global store.setState

Sample 1:

channel.setState({
    stateKey0: {
        '@@SET': <any> // replaces `state.stateKey0` with value
    }
});

Sample 2:
Using Computed value

channel.setState({
    stateKey0: {
        // replaces `state.stateKey0` with return value
        '@@SET': ( currentStateKey0: <any> ) => <any>
    }
});

This tag is for handling edge cases only.

Please use sparingly. In most cases, channel.setState with or without any of the other tags is sufficient and most efficient.

This and the '@@REPLACE' tags are functionally equivalent when used with a replacement value argument.

Be aware that the compute function argument may be undefined for properties which do not yet exist in the state.

Example:

import { SET_TAG } from '@webkrafters/eagleeye'; // SET_TAG = "@@SET"

const state = {
    a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
    j: 10
};

channel.setState({ [ SET_TAG ]: currentValue => ({ ...currentValue, a: 'Demo', j: 17 }) }) // rewrites state to { ...state, a: 'Demo', j: 17 };

channel.setState({ a: { [ SET_TAG ]: currentValue => ({ ...currentValue, message: 'Testing...' }) } }) // rewrites state.a to { ...state, message: 'Testing...' }

/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] */
channel.setState({ a: { b: [ state.a.b[ 0 ], { [ SET_TAG ]: currentValue => ({ ...currentValue, x: 97, y: 98, z: 99 }) } ] } })

/* rewrites state.a.b[1] to { x: 97, y: 98, z: 99 }; leaving state.a.b = [{ x: 7, y: 8, z: 9 }, { x: 97, y: 98, z: 99 }] using indexing (RECOMMENDED) */
channel.setState({ a: { b: { 1: { [ SET_TAG ]: currentValue => ({ ...currentValue, x: 97, y: 98, z: 99 }) } } } });

channel.setState @@SET Tag Usage

Example:

`channel.setState` @@SET Tag Usage