Is it possible to navigate inside a Redux toolkit action to another screen after an asyncthunk is fullfilled?

Question

So recently I am working on a react native app. I did wonder how I navigate from a fullfiled action?

I did not find away to be able to do that. What i have so far is this:

1. Dispatch Action
2. Navigate without knowing the result.

How is this achievable.

Some code: Dispatch in the Submit function:

                dispatch(
                    createTopic({
                        title: values.title,
                        subject: values.subject,
                        subsubject: values.subSubject,
                        description: values.description,
                        uid: userUid
                    })
                , [dispatch])




export const createTopic = createAsyncThunk('topic/createTopic',
    async ({title, subject, subsubject, description, uid}) =>{
        try {
            console.log(uid)     
            const response = await firebase.firestore().collection("Users").doc(uid).collection("Topics")
                .doc()
                .set({  
                    title: title,
                    subject: subject,
                    subsubject: subsubject,
                    description: description
                })
                return response
        } catch (error) {
            console.log(error)
        }
    }
)

Answer 1

I'm assuming since this is react-native that you are using react-navigation? It is possible to navigate within the Redux action itself using the methods described in the docs page Navigating without the navigation prop. But it's probably better to initiate the navigation from the component.

The result of dispatching a thunk action is a Promise. Redux toolkit wraps this Promise so that there are no uncaught errors in your component. It always resolves to either a success or failure action. But you can unwrap() the result to use it with a try/catch.

const dispatch = useDispatch();

const navigation = useNavigation();

const handleSubmit = async (e) => {
  try {
    // wait for the action to complete successfully
    const response = await dispatch(createTopic(args)).unwrap();
    // then navigate
    navigation.navigate(...);
  } catch (error) {
    // do something
  }
}

Note: you should not use a try/catch in your createAsyncThunk. You want errors to be thrown so that they dispatch a 'topic/createTopic/rejected' action.

Answer 2

If you want to navigate from redux action and any were event when you don't have navigation prop, use ref of the navigation container,

eg:

export const navigationRef = createRef()

// when adding NavigationContainer add this ref


ie:
<Navigationcontainer ref={navigationRef}>
 {...rest code}
</Navigationcontainer>

now you can use that ref to navigate to other screens

eg:

navigationRef.current?.navigate('ScreenName', params)

use above line the redux action...