store.setState @@SET Tag Usage
Sample 1:store.setState({
stateKey0: {
'@@SET': <any> // replaces `state.stateKey0` with value
}
});Sample 2:Using Computed value
store.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, store.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { SET_TAG } from '@webkrafters/react-observable-context'; // SET_TAG = "@@SET"
const state = {
a: { b: [{ x: 7, y: 8, z: 9 }, { x: 17, y: 18, z: 19 }] },
j: 10
};
store.setState({ [ SET_TAG ]: currentValue => ({ ...currentValue, a: 'Demo', j: 17 }) }) // rewrites state to { ...state, a: 'Demo', j: 17 };
store.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 }] */
store.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) */
store.setState({ a: { b: { 1: { [ SET_TAG ]: currentValue => ({ ...currentValue, x: 97, y: 98, z: 99 }) } } } });