React native Redux Saga with Redux Tollkit

[ZoHayk]

Hello. I do as written in the documentation, but I can't use Redux Toolkit and Redux Saga together.

https://redux-saga.js.org/docs/introduction/GettingStarted

I am getting this kind of error.

ERROR A non-serializable value was detected in an action, in the path: payload. Value: {"_dispatchInstances": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.45448999479413, "actualStartTime": 28060305.397139, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.2628039978444576, "sibling": null, "stateNode": null, "subtreeFlags": 9439745, "tag": 11, "treeBaseDuration": 3.038204997777939, "type": [Object], "updateQueue": null}, "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 2.7115749940276146, "actualStartTime": 28060305.762291, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1048576, "index": 0, "key": null, "lanes": 0, "memoizedProps": <Text … />, "memoizedState": null, "mode": 2, "pendingProps": <Text … />, "ref": null, "return": [Circular], "selfBaseDuration": 0.025817997753620148, "sibling": [FiberNode], "stateNode": null, "subtreeFlags": 8390657, "tag": 7, "treeBaseDuration": 1.5022940002381802, "type": null, "updateQueue": null}, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 2, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "ref": [Function anonymous], "return": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.186172995716333, "actualStartTime": 28060305.664082, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.03423599898815155, "sibling": null, "stateNode": null, "subtreeFlags": 9439745, "tag": 10, "treeBaseDuration": 2.775400999933481, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 19, "viewConfig": [Object]}, "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "_dispatchListeners": [Function onResponderRelease], "_targetInst": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.45448999479413, "actualStartTime": 28060305.397139, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.2628039978444576, "sibling": null, "stateNode": null, "subtreeFlags": 9439745, "tag": 11, "treeBaseDuration": 3.038204997777939, "type": [Object], "updateQueue": null}, "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 2.7115749940276146, "actualStartTime": 28060305.762291, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1048576, "index": 0, "key": null, "lanes": 0, "memoizedProps": <Text … />, "memoizedState": null, "mode": 2, "pendingProps": <Text … />, "ref": null, "return": [Circular], "selfBaseDuration": 0.025817997753620148, "sibling": [FiberNode], "stateNode": null, "subtreeFlags": 8390657, "tag": 7, "treeBaseDuration": 1.5022940002381802, "type": null, "updateQueue": null}, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 2, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": undefined, "accessibilityLabelledBy": undefined, "accessibilityLanguage": undefined, "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": [Object], "accessibilityValue": [Object], "accessibilityViewIsModal": undefined, "accessible": true, "children": [Array], "collapsable": false, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "pointerEvents": undefined, "style": [Object], "testID": undefined}, "ref": [Function anonymous], "return": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.186172995716333, "actualStartTime": 28060305.664082, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0.03423599898815155, "sibling": null, "stateNode": null, "subtreeFlags": 9439745, "tag": 10, "treeBaseDuration": 2.775400999933481, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 19, "viewConfig": [Object]}, "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [[ReactNativeFiberHostComponent]], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": [Circular], "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "_nativeTag": 19, "viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "ViewManager", "NativeProps": [Object], "baseModuleName": null, "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTView", "validAttributes": [Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": ["topTouchCancel", "topTouchEnd"], "registrationName": "onResponderRelease"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"changedTouches": [[Circular]], "identifier": 1, "locationX": 172.99999046325684, "locationY": 23.666667938232422, "pageX": 194.66665649414062, "pageY": 115, "target": 19, "timestamp": 26622839.953612, "touches": []}, "target": {"_children": [[ReactNativeFiberHostComponent]], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": [Circular], "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "_nativeTag": 19, "viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "ViewManager", "NativeProps": [Object], "baseModuleName": null, "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTView", "validAttributes": [Object]}}, "timeStamp": 1693789196095, "touchHistory": {"indexOfSingleActiveTouch": 1, "mostRecentTimeStamp": 26622839.953612, "numberActiveTouches": 0, "touchBank": [undefined, [Object]]}, "type": undefined}
Take a look at the logic that dispatched this action: {"payload": {"_dispatchInstances": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "_dispatchListeners": [Function onResponderRelease], "_targetInst": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": undefined, "actualDuration": 9.13655299693346, "actualStartTime": 28060305.701192, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 512, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 2, "pendingProps": [Object], "ref": [Function anonymous], "return": [FiberNode], "selfBaseDuration": 0.05785199999809265, "sibling": null, "stateNode": [ReactNativeFiberHostComponent], "subtreeFlags": 9439233, "tag": 5, "treeBaseDuration": 2.7411650009453297, "type": "RCTView", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [Array], "_internalFiberInstanceHandleDEV": [FiberNode], "_nativeTag": 19, "viewConfig": [Object]}, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": [Array], "registrationName": "onResponderRelease"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"changedTouches": [Array], "identifier": 1, "locationX": 172.99999046325684, "locationY": 23.666667938232422, "pageX": 194.66665649414062, "pageY": 115, "target": 19, "timestamp": 26622839.953612, "touches": [Array]}, "target": {"_children": [Array], "_internalFiberInstanceHandleDEV": [FiberNode], "_nativeTag": 19, "viewConfig": [Object]}, "timeStamp": 1693789196095, "touchHistory": {"indexOfSingleActiveTouch": 1, "mostRecentTimeStamp": 26622839.953612, "numberActiveTouches": 0, "touchBank": [Array]}, "type": undefined}, "type": "app/RESET_APP"}
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)
WARN SerializableStateInvariantMiddleware took 332ms, which is more than the warning threshold of 32ms.
If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions.

I create Action.
As stated in the documentation.
https://redux-toolkit.js.org/api/createAction

I create a Saga and call this Saga through Action (createAction) and get an error, but if I create an Action with createAsyncThunk it works.
It turns out that I call Saga through Action redux Thunk. And the main problem is that createAsyncThunk is called twice.

Environment information

"@reduxjs/toolkit": "^1.9.5",
"react": "18.2.0",
"react-native": "0.72.4",
"react-redux": "^8.1.2",
"redux-persist": "^6.0.0",
"redux-saga": "^1.2.3",
"regenerator-runtime": "^0.14.0"

System:
OS: macOS 13.5.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 1.29 GB / 16.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 18.17.1
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.7
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false