JS: Redux model

This commit is contained in:
Asger Feldthaus
2021-01-25 13:00:27 +00:00
parent 314839fc09
commit 8fa3fb0561
7 changed files with 1730 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
import { combineReducers } from 'redux';
export default (state, action) => {
return state;
};
export function notAReducer(notState, notAction) {
console.log(notState, notAction);
}
export const nestedReducer = combineReducers({
inner: (state, action) => state
});

View File

@@ -0,0 +1,79 @@
import * as React from 'react';
import { connect, useDispatch } from 'react-redux';
import * as rt from '@reduxjs/toolkit';
const toolkitAction = rt.createAction('toolkitAction', (x) => {
return {
toolkitValue: x
}
});
const toolkitReducer = rt.createReducer({}, builder => {
builder
.addCase(toolkitAction, (state, action) => {
return {
value: action.payload.toolkitValue,
...state
};
})
.addCase(asyncAction.fulfilled, (state, action) => {
return {
asyncValue: action.payload.x,
...state
};
});
});
function manualAction(x) {
return {
type: 'manualAction',
payload: x
}
}
function manualReducer(state, action) {
switch (action.type) {
case 'manualAction': {
return { ...state, manualValue: action.payload };
}
}
return state;
}
const asyncAction = rt.createAsyncThunk('asyncAction', (x) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ x });
}, 10)
});
});
const store = rt.createStore(rt.combineReducers({
toolkit: toolkitReducer,
manual: manualReducer,
}));
function MyComponent(props) {
let dispatch = useDispatch();
const clickHandler = React.useCallback(() => {
props.toolkitAction(source());
props.manualAction(source()); // not currently propagated as functions are not type-tracked
dispatch(manualAction(source()));
dispatch(asyncAction(source()));
});
sink(props.propFromToolkitAction); // NOT OK
sink(props.propFromManualAction); // NOT OK
sink(props.propFromAsync); // NOT OK
return <button onClick={{clickHandler}}/>
}
function mapStateToProps(state) {
return {
propFromToolkitAction: state.toolkit.value,
propFromAsync: state.toolkit.asyncValue,
propFromManualAction: state.manual.manualValue
}
}
const mapDispatchToProps = { toolkitAction, manualAction };
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

View File

@@ -0,0 +1,154 @@
reducerArg
| exportedReducer.js:12:12:12:35 | (state, ... > state |
| react-redux.jsx:12:33:17:9 | (state, ... } |
| react-redux.jsx:18:41:23:9 | (state, ... } |
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) |
| react-redux.jsx:49:14:49:27 | toolkitReducer |
| react-redux.jsx:50:13:50:25 | manualReducer |
| trivial.js:10:10:10:33 | (state, ... > state |
| trivial.js:11:10:13:5 | {\\n ... ,\\n } |
| trivial.js:12:14:12:37 | (state, ... > state |
| trivial.js:16:10:16:33 | (state, ... > state |
| trivial.js:17:10:19:5 | {\\n ... ,\\n } |
| trivial.js:18:14:18:37 | (state, ... > state |
| trivial.js:22:10:22:33 | (state, ... > state |
| trivial.js:23:10:25:5 | {\\n ... ,\\n } |
| trivial.js:24:14:24:37 | (state, ... > state |
| trivial.js:29:16:29:39 | (state, ... > state |
| trivial.js:32:73:32:96 | (state, ... > state |
| trivial.js:46:33:46:56 | (state, ... > state |
| trivial.js:47:33:47:56 | (state, ... > state |
| trivial.js:130:14:130:46 | wrapper ... state) |
| trivial.js:133:45:133:66 | combine ... Reducer |
| trivial.js:134:56:134:79 | (state, ... > state |
| trivial.js:136:14:136:37 | (state, ... > state |
isActionTypeHandler
| react-redux.jsx:12:18:12:30 | toolkitAction | react-redux.jsx:12:33:17:9 | (state, ... } |
| react-redux.jsx:18:18:18:38 | asyncAc ... lfilled | react-redux.jsx:18:41:23:9 | (state, ... } |
| trivial.js:29:5:29:13 | fooAction | trivial.js:29:16:29:39 | (state, ... > state |
| trivial.js:32:60:32:70 | 'fooAction' | trivial.js:32:73:32:96 | (state, ... > state |
| trivial.js:46:18:46:30 | toolkitAction | trivial.js:46:33:46:56 | (state, ... > state |
| trivial.js:47:18:47:30 | toolkitAction | trivial.js:47:33:47:56 | (state, ... > state |
isTypeTagHandler
| asyncAction | react-redux.jsx:18:41:23:9 | (state, ... } |
| counter/increment | trivial.js:46:33:46:56 | (state, ... > state |
| counter/increment | trivial.js:47:33:47:56 | (state, ... > state |
| fooAction | trivial.js:29:16:29:39 | (state, ... > state |
| fooAction | trivial.js:32:73:32:96 | (state, ... > state |
| toolkitAction | react-redux.jsx:12:33:17:9 | (state, ... } |
isRootStateHandler
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) |
| trivial.js:133:45:133:66 | combine ... Reducer |
| trivial.js:134:56:134:79 | (state, ... > state |
| trivial.js:136:14:136:37 | (state, ... > state |
delegatingReducer
| exportedReducer.js:11:30:13:2 | combine ... tate\\n}) |
| react-redux.jsx:10:24:24:2 | rt.crea ... });\\n}) |
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) |
| trivial.js:9:22:14:2 | require ... }\\n}) |
| trivial.js:11:10:13:5 | {\\n ... ,\\n } |
| trivial.js:15:26:20:2 | require ... }\\n}) |
| trivial.js:17:10:19:5 | {\\n ... ,\\n } |
| trivial.js:21:24:26:2 | require ... }\\n}) |
| trivial.js:23:10:25:5 | {\\n ... ,\\n } |
| trivial.js:28:23:30:2 | require ... ate,\\n}) |
| trivial.js:32:22:32:97 | require ... state) |
| trivial.js:34:24:34:88 | require ... state) |
| trivial.js:36:15:36:56 | require ... state) |
| trivial.js:37:22:37:71 | require ... state) |
| trivial.js:39:25:39:76 | require ... state) |
| trivial.js:40:25:40:96 | require ... cers1]) |
| trivial.js:41:25:41:89 | require ... state) |
| trivial.js:42:25:42:109 | require ... cers1]) |
| trivial.js:44:23:48:2 | require ... ate)\\n}) |
| trivial.js:129:32:131:2 | require ... te),\\n}) |
getStateHandlerArg
| exportedReducer.js:11:30:13:2 | combine ... tate\\n}) | inner | exportedReducer.js:12:12:12:35 | (state, ... > state |
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) | manual | react-redux.jsx:50:13:50:25 | manualReducer |
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) | toolkit | react-redux.jsx:49:14:49:27 | toolkitReducer |
| trivial.js:9:22:14:2 | require ... }\\n}) | bar | trivial.js:11:10:13:5 | {\\n ... ,\\n } |
| trivial.js:9:22:14:2 | require ... }\\n}) | foo | trivial.js:10:10:10:33 | (state, ... > state |
| trivial.js:11:10:13:5 | {\\n ... ,\\n } | baz | trivial.js:12:14:12:37 | (state, ... > state |
| trivial.js:15:26:20:2 | require ... }\\n}) | bar | trivial.js:17:10:19:5 | {\\n ... ,\\n } |
| trivial.js:15:26:20:2 | require ... }\\n}) | foo | trivial.js:16:10:16:33 | (state, ... > state |
| trivial.js:17:10:19:5 | {\\n ... ,\\n } | baz | trivial.js:18:14:18:37 | (state, ... > state |
| trivial.js:21:24:26:2 | require ... }\\n}) | bar | trivial.js:23:10:25:5 | {\\n ... ,\\n } |
| trivial.js:21:24:26:2 | require ... }\\n}) | foo | trivial.js:22:10:22:33 | (state, ... > state |
| trivial.js:23:10:25:5 | {\\n ... ,\\n } | baz | trivial.js:24:14:24:37 | (state, ... > state |
| trivial.js:129:32:131:2 | require ... te),\\n}) | wrapped | trivial.js:130:14:130:46 | wrapper ... state) |
getActionHandlerArg
| react-redux.jsx:10:24:24:2 | rt.crea ... });\\n}) | react-redux.jsx:12:18:12:30 | toolkitAction | react-redux.jsx:12:33:17:9 | (state, ... } |
| react-redux.jsx:10:24:24:2 | rt.crea ... });\\n}) | react-redux.jsx:18:18:18:38 | asyncAc ... lfilled | react-redux.jsx:18:41:23:9 | (state, ... } |
| trivial.js:28:23:30:2 | require ... ate,\\n}) | trivial.js:29:5:29:13 | fooAction | trivial.js:29:16:29:39 | (state, ... > state |
| trivial.js:32:22:32:97 | require ... state) | trivial.js:32:60:32:70 | 'fooAction' | trivial.js:32:73:32:96 | (state, ... > state |
| trivial.js:44:23:48:2 | require ... ate)\\n}) | trivial.js:46:18:46:30 | toolkitAction | trivial.js:46:33:46:56 | (state, ... > state |
| trivial.js:44:23:48:2 | require ... ate)\\n}) | trivial.js:47:18:47:30 | toolkitAction | trivial.js:47:33:47:56 | (state, ... > state |
getAPlainHandlerArg
| trivial.js:36:15:36:56 | require ... state) | trivial.js:36:32:36:55 | (state, ... > state |
| trivial.js:37:22:37:71 | require ... state) | trivial.js:37:47:37:70 | (state, ... > state |
| trivial.js:39:25:39:76 | require ... state) | trivial.js:39:52:39:75 | (state, ... > state |
| trivial.js:40:25:40:96 | require ... cers1]) | trivial.js:40:52:40:95 | [(state ... ucers1] |
| trivial.js:40:25:40:96 | require ... cers1]) | trivial.js:40:53:40:76 | (state, ... > state |
| trivial.js:40:25:40:96 | require ... cers1]) | trivial.js:40:79:40:94 | reducerReducers1 |
| trivial.js:41:25:41:89 | require ... state) | trivial.js:41:65:41:88 | (state, ... > state |
| trivial.js:42:25:42:109 | require ... cers1]) | trivial.js:42:65:42:108 | [(state ... ucers1] |
| trivial.js:42:25:42:109 | require ... cers1]) | trivial.js:42:66:42:89 | (state, ... > state |
| trivial.js:42:25:42:109 | require ... cers1]) | trivial.js:42:92:42:107 | reducerReducers1 |
getUseSite
| react-redux.jsx:10:24:24:2 | rt.crea ... });\\n}) | react-redux.jsx:49:14:49:27 | toolkitReducer |
| react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) | react-redux.jsx:48:30:51:2 | rt.comb ... cer,\\n}) |
| trivial.js:11:10:13:5 | {\\n ... ,\\n } | trivial.js:11:10:13:5 | {\\n ... ,\\n } |
| trivial.js:17:10:19:5 | {\\n ... ,\\n } | trivial.js:17:10:19:5 | {\\n ... ,\\n } |
| trivial.js:23:10:25:5 | {\\n ... ,\\n } | trivial.js:23:10:25:5 | {\\n ... ,\\n } |
| trivial.js:129:32:131:2 | require ... te),\\n}) | trivial.js:133:45:133:66 | combine ... Reducer |
storeCreation
| react-redux.jsx:48:15:51:3 | rt.crea ... er,\\n})) |
| trivial.js:133:16:133:67 | require ... educer) |
| trivial.js:134:16:134:80 | require ... state) |
| trivial.js:135:16:137:2 | require ... tate\\n}) |
taintFlow
| react-redux.jsx:56:29:56:36 | source() | react-redux.jsx:62:10:62:36 | props.p ... tAction |
| react-redux.jsx:58:31:58:38 | source() | react-redux.jsx:63:10:63:35 | props.p ... lAction |
| react-redux.jsx:59:30:59:37 | source() | react-redux.jsx:64:10:64:28 | props.propFromAsync |
getAffectedStateAccessPath
| react-redux.jsx:12:33:17:9 | (state, ... } | toolkit |
| react-redux.jsx:18:41:23:9 | (state, ... } | toolkit |
| react-redux.jsx:49:14:49:27 | toolkitReducer | toolkit |
| react-redux.jsx:50:13:50:25 | manualReducer | manual |
| trivial.js:130:14:130:46 | wrapper ... state) | wrapped |
getADispatchFunctionReference
| react-redux.jsx:54:20:54:32 | useDispatch() |
getADispatchedValueSource
| react-redux.jsx:26:1:31:1 | return of function manualAction |
| react-redux.jsx:27:12:30:5 | {\\n ... x\\n } |
| react-redux.jsx:58:18:58:39 | manualA ... urce()) |
| react-redux.jsx:59:18:59:38 | asyncAc ... urce()) |
getAnUntypedActionInReducer
| exportedReducer.js:12:20:12:25 | action |
| react-redux.jsx:32:31:32:36 | action |
| trivial.js:10:18:10:23 | action |
| trivial.js:12:22:12:27 | action |
| trivial.js:16:18:16:23 | action |
| trivial.js:18:22:18:27 | action |
| trivial.js:22:18:22:23 | action |
| trivial.js:24:22:24:27 | action |
| trivial.js:124:20:124:25 | action |
| trivial.js:130:30:130:35 | action |
| trivial.js:134:64:134:69 | action |
| trivial.js:136:22:136:27 | action |
actionToReducerStep
| react-redux.jsx:5:56:9:1 | return of anonymous function | react-redux.jsx:14:24:14:37 | action.payload |
| react-redux.jsx:29:18:29:18 | x | react-redux.jsx:35:45:35:58 | action.payload |
| react-redux.jsx:56:29:56:36 | source() | react-redux.jsx:5:57:5:57 | x |
| react-redux.jsx:59:30:59:37 | source() | react-redux.jsx:40:57:40:57 | x |
actionToReducerPromiseStep
| react-redux.jsx:40:56:46:1 | return of anonymous function | react-redux.jsx:20:29:20:42 | action.payload |
reducerToStateStep
| react-redux.jsx:12:33:17:9 | return of anonymous function | react-redux.jsx:71:32:71:44 | state.toolkit |
| react-redux.jsx:12:33:17:9 | return of anonymous function | react-redux.jsx:72:24:72:36 | state.toolkit |
| react-redux.jsx:14:24:14:50 | action. ... itValue | react-redux.jsx:71:32:71:50 | state.toolkit.value |
| react-redux.jsx:18:41:23:9 | return of anonymous function | react-redux.jsx:71:32:71:44 | state.toolkit |
| react-redux.jsx:18:41:23:9 | return of anonymous function | react-redux.jsx:72:24:72:36 | state.toolkit |
| react-redux.jsx:20:29:20:44 | action.payload.x | react-redux.jsx:72:24:72:47 | state.t ... ncValue |
| react-redux.jsx:32:1:39:1 | return of function manualReducer | react-redux.jsx:73:31:73:42 | state.manual |
| react-redux.jsx:35:45:35:58 | action.payload | react-redux.jsx:73:31:73:54 | state.m ... alValue |

View File

@@ -0,0 +1,61 @@
import javascript
query predicate getAffectedStateAccessPath = Redux::getAffectedStateAccessPath/1;
query Redux::ReducerArg reducerArg() { any() }
query Redux::ReducerArg isActionTypeHandler(DataFlow::Node actionType) {
result.isActionTypeHandler(actionType)
}
query Redux::ReducerArg isTypeTagHandler(string typeTag) { result.isTypeTagHandler(typeTag) }
query Redux::ReducerArg isRootStateHandler() { result.isRootStateHandler() }
query Redux::DelegatingReducer delegatingReducer() { any() }
query DataFlow::Node getStateHandlerArg(Redux::DelegatingReducer reducer, string prop) {
result = reducer.getStateHandlerArg(prop)
}
query DataFlow::Node getActionHandlerArg(Redux::DelegatingReducer reducer, DataFlow::Node actionType) {
result = reducer.getActionHandlerArg(actionType)
}
query DataFlow::Node getAPlainHandlerArg(Redux::DelegatingReducer reducer) {
result = reducer.getAPlainHandlerArg()
}
query Redux::ReducerArg getUseSite(Redux::DelegatingReducer reducer) {
result = reducer.getUseSite()
}
query predicate getADispatchFunctionReference = Redux::getADispatchFunctionReference/0;
query predicate getADispatchedValueSource = Redux::getADispatchedValueSource/0;
query predicate getAnUntypedActionInReducer = Redux::getAnUntypedActionInReducer/0;
query predicate actionToReducerStep = Redux::actionToReducerStep/2;
query predicate actionToReducerPromiseStep = Redux::actionToReducerPromiseStep/2;
query predicate reducerToStateStep = Redux::reducerToStateStep/2;
query Redux::StoreCreation storeCreation() { any() }
class BasicTaint extends TaintTracking::Configuration {
BasicTaint() { this = "BasicTaint" }
override predicate isSource(DataFlow::Node node) {
node.(DataFlow::CallNode).getCalleeName() = "source"
}
override predicate isSink(DataFlow::Node node) {
node = any(DataFlow::CallNode call | call.getCalleeName() = "sink").getAnArgument()
}
}
query predicate taintFlow(DataFlow::Node source, DataFlow::Node sink) {
any(BasicTaint cfg).hasFlow(source, sink)
}

View File

@@ -0,0 +1,137 @@
// This file contains a lot of trivial reducers and actions, simply to test that
// the Redux model recognizes them, but no data flow passes through them.
const toolkitAction = require('@reduxjs/toolkit').createAction('counter/increment');
const toolkitAsyncAction = require('@reduxjs/toolkit').createAsyncThunk('async-action', async (arg) => {
return await (await fetch(arg)).json();
})
const reduxCombine = require('redux').combineReducers({
foo: (state, action) => state,
bar: {
baz: (state, action) => state,
}
});
const immutableCombine = require('redux-immutable').combineReducers({
foo: (state, action) => state,
bar: {
baz: (state, action) => state,
}
});
const toolkitCombine = require('@reduxjs/toolkit').combineReducers({
foo: (state, action) => state,
bar: {
baz: (state, action) => state,
}
});
const handleActions = require('redux-actions').handleActions({
fooAction: (state, action) => state,
});
const handleAction = require('redux-actions').handleAction('fooAction', (state, action) => state);
const persistReducer = require('redux-persist').persistReducer((state, action) => state);
const immer = require('immer')((state, action) => state);
const immerProduce = require('immer').produce((state, action) => state);
const reduceReducers1 = require('reduce-reducers')((state, action) => state);
const reduceReducers2 = require('reduce-reducers')([(state, action) => state, reducerReducers1]);
const reduceReducers3 = require('redux-actions').reduceReducers((state, action) => state);
const reduceReducers4 = require('redux-actions').reduceReducers([(state, action) => state, reducerReducers1]);
const createReducer = require('@reduxjs/toolkit').createReducer(0, builder => {
builder
.addCase(toolkitAction, (state, action) => state)
.addCase(toolkitAction, (state, action) => state)
});
function createSlice1() {
const { increment } = require('@reduxjs/toolkit').createSlice({
name: 'counter1',
initialState: 0,
reducers: {
increment(state, action) {
return state;
}
},
extraReducers: {
[toolkitAction]: (state, action) => {
return state;
},
[toolkitAsyncAction.fulfilled]: (state, action) => {
action.meta.arg;
return state;
},
[toolkitAsyncAction.rejected]: (state, action) => {
action.meta.arg;
return state;
},
[toolkitAsyncAction.pending]: (state, action) => {
action.meta.arg;
return state;
}
}
});
return increment;
}
function createSlice2() {
const { increment } = require('@reduxjs/toolkit').createSlice({
name: 'counter2',
initialState: 0,
reducers: {
increment(state, action) {
return state;
}
},
extraReducers: builder => {
builder
.addCase(toolkitAction, (state, action) => state)
.addCase(toolkitAsyncAction.fulfilled, (state, action) => {
action.meta.arg;
return state;
});
}
});
return increment;
}
let importedReducers = combineReducers({
foo: {
bar: {
baz: (state, action) => state
},
baloon: require('./exportedReducer'),
},
nestedReducer: require('./exportedReducer').nestedReducer
});
const reduxActions = require('redux-actions').createAction('reduxActionsCreateAction');
const tsUtils = require('redux-ts-utils').createAction('tsUtilCreateAction');
const { fooAction2, barAction2 } = require('redux-actions').createActions({
foo1Action2(x, y) {
return { x, y }
},
barAction2(x) {
return { x }
}
});
function wrapper(fn) {
return (state, action) => {
console.log('hello');
return fn(state, action);
}
}
const combinedWrappedReducer = require('redux').combineReducers({
wrapped: wrapper((state, action) => state),
});
const store1 = require('redux').createStore(combinedWrappedReducer);
const store2 = require('@reduxjs/toolkit').createStore((state, action) => state);
const store3 = require('@reduxjs/toolkit').configureStore({
reducer: (state, action) => state
});