React native Redux Saga with Redux Tollkit

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