2.0.0 • Public • Published


AboutInstallationBasic UsageBugs?


@flowbuild/react-redux-workflow-manager is a library to help you to use the Workflow Manager.


With npm:

npm i @flowbuild/redux-toolkit-workflow-manager

With yarn:

yarn add @flowbuild/redux-toolkit-workflow-manager

Basic Usage

We need to do this steps to migrate to this awesome pattern:

Creating file to reference actions to page names

First of all, let's create a javascript file with a JSON. The properties of this object are the actions and the values are the name pages in router file.

// referencesPages.js

const ReferencesPages = {
  HOME: "Home",

export default ReferencesPages;

Configuring Redux Store

Let's set the redux store. This lib requires redux (@redux/toolkit) to manage the workflow, so go to your redux store file and add:

import { configureStore } from  '@reduxjs/toolkit';
import loginReducer from '@flowbuild/redux-toolkit-workflow-manager/login.slice';
import WorkflowManagerSlice from '@flowbuild/redux-toolkit-workflow-manager/workflowManager.slice';

const  store  =  configureStore({
  reducer: {
    login: loginReducer,
    workflowManager:  WorkflowManagerSlice(YOUR_HOST),

Adding Workflow Manager Tag

Ok, now we're able to use the workflow manager tag. We need to use this tag as a parent of Navigation/Router tag of our application. (The navigation tag represents a general function to dealing with the navigation of our application).

import React from 'react';
import { Provider } from  'react-redux';
import { WorkflowManager } from  '@flowbuild/redux-toolkit-workflow-manager';

import store from  './redux';

const App = () => {
  return (
    <Provider store={store}>
        <Navigation />

Configuring navigation architecture to use nested router

If you already have a router implemented, don't worry, this change is easy to make. We need this to use navigation functions.

Using @react-navigation/stack, let's declare two consts with createStackNavigator hook.

import { createStackNavigator } from '@react-navigation/stack';

const RootStack = createStackNavigator();
const NestedStack = createStackNavigator();

Your application's router gonna be inside NestedStack. Let's make our function to return the router. (If your application start with an workflow, you gonna need to make a Loading Screen).

function NavigationWithRoutes({ navigation }) {
  return (
      {/* Declare your screens here */}
      <NestedStack.Screen name={"LoadingScreen"} component={/* LoadingComponent */} />
      <NestedStack.Screen name={"Home"} component={/* HomeComponent */} />

After that, let's create our function to be the root of navigation:

import { NavigationContainer } from '@react-navigation/native';

export function Navigation() {
      <RootStack.Screen name="NavigationWithRoutes" component={NavigationWithRoutes} />

Configuring automatic navigate

Let's configure the last step to begin. We have to configure a useEffect to watch what is the current activity in your application. To receive the current activity, the lib has a hook (useWorkflowManager) that returns the current activity. Inside this useEffect, we need to call a function that sets the navigation. Also, the hook has this function.

import React, { useEffect } from  'react';
import { useWorkflowManager } from  '@flowbuild/redux-toolkit-workflow-manager/useWorkflowManager';

function NavigationWithRoutes({ navigation }) {
  const {currentActivity, setNavigation} = useWorkflowManager();

  useEffect(() => {
    setNavigation(START_WORKFLOW_NAME, manageActivity);
  }, [currentActivity]);

  function manageActivity() { ... }
  return (

After that, let's make the function to manage the navigate. Inside the manageActivity function, our code is:

function manageActivity() {
  const {
    props: { action },
  } = currentActivity;

  if (pagesWorkflow[action]) {


  • [x] Did you try latest release?
  • [x] Did you look for existing matching issues?




Package Sidebar


npm i @flowbuild/redux-toolkit-workflow-manager

Weekly Downloads






Unpacked Size

26.7 kB

Total Files


Last publish


  • imagure
  • lucas.biason.fdte
  • wallace.silva.ferreira
  • ricardo.imagure
  • pedropereiraassis
  • fdte_pcasari
  • gustavo_fdte
  • rafgoncalves
  • elson_oliveira
  • bot.flowbuild