mirror of
https://github.com/github/codeql.git
synced 2026-04-29 18:55:14 +02:00
JS: Redux model
This commit is contained in:
Asger Feldthaus
@@ -105,6 +105,7 @@ import semmle.javascript.frameworks.PropertyProjection
|
||||
import semmle.javascript.frameworks.Puppeteer
|
||||
import semmle.javascript.frameworks.React
|
||||
import semmle.javascript.frameworks.ReactNative
|
||||
import semmle.javascript.frameworks.Redux
|
||||
import semmle.javascript.frameworks.Request
|
||||
import semmle.javascript.frameworks.RxJS
|
||||
import semmle.javascript.frameworks.ServerLess
|
||||
|
||||
1285
javascript/ql/src/semmle/javascript/frameworks/Redux.qll
Normal file
1285
javascript/ql/src/semmle/javascript/frameworks/Redux.qll
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
});
|
||||
@@ -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);
|
||||
154
javascript/ql/test/library-tests/frameworks/Redux/test.expected
Normal file
154
javascript/ql/test/library-tests/frameworks/Redux/test.expected
Normal 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 |
|
||||
61
javascript/ql/test/library-tests/frameworks/Redux/test.ql
Normal file
61
javascript/ql/test/library-tests/frameworks/Redux/test.ql
Normal 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)
|
||||
}
|
||||
137
javascript/ql/test/library-tests/frameworks/Redux/trivial.js
Normal file
137
javascript/ql/test/library-tests/frameworks/Redux/trivial.js
Normal 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
|
||||
});
|
||||
Reference in New Issue
Block a user