{"id":25650682,"url":"https://github.com/flow-build/react-redux-workflow-manager","last_synced_at":"2025-04-15T19:38:56.783Z","repository":{"id":45155513,"uuid":"353070523","full_name":"flow-build/react-redux-workflow-manager","owner":"flow-build","description":null,"archived":false,"fork":false,"pushed_at":"2022-01-04T19:35:47.000Z","size":63,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T00:12:59.263Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flow-build.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-30T16:36:16.000Z","updated_at":"2023-12-06T15:51:32.000Z","dependencies_parsed_at":"2022-08-25T16:11:12.799Z","dependency_job_id":null,"html_url":"https://github.com/flow-build/react-redux-workflow-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-redux-workflow-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-redux-workflow-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-redux-workflow-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flow-build%2Freact-redux-workflow-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flow-build","download_url":"https://codeload.github.com/flow-build/react-redux-workflow-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586241,"owners_count":21128998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-23T15:17:47.345Z","updated_at":"2025-04-15T19:38:56.746Z","avatar_url":"https://github.com/flow-build.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @flowbuild/react-redux-workflow-manager\r\n\r\n[About](#about) • [Installation](#installation) • [Basic Usage](#basic-usage) • [Bugs?](#bugs)\r\n\r\n## About\r\n\r\n@flowbuild/react-redux-workflow-manager is a library to help you to use the Workflow Manager.\r\n\r\n## Installation\r\n\r\nWith npm:\r\n\r\n    npm i @flowbuild/redux-toolkit-workflow-manager\r\n\r\nWith yarn:\r\n\r\n    yarn add @flowbuild/redux-toolkit-workflow-manager\r\n\r\n## Basic Usage\r\n\r\nWe need to do this steps to migrate to this awesome pattern:\r\n\r\n- [Creating a file to reference actions to page names](#creating-file-to-reference-actions-to-page-names)\r\n- [Configuring Redux Store](#configuring-redux-store)\r\n- [Adding Workflow Manager Tag](#adding-workflow-manager-tag)\r\n- [Configuring navigation architecture to use nested router](#configuring-navigation-architecture-to-use-nested-router)\r\n- [Configuring automatic navigate](#configuring-automatic-navigate)\r\n\r\n#### Creating file to reference actions to page names\r\n\r\nFirst 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.\r\n\r\n```javascript\r\n// referencesPages.js\r\n\r\nconst ReferencesPages = {\r\n  HOME: \"Home\",\r\n};\r\n\r\nexport default ReferencesPages;\r\n```\r\n\r\n#### Configuring Redux Store\r\n\r\nLet's set the redux store. This lib requires redux ([@redux/toolkit](https://redux-toolkit.js.org/introduction/getting-started)) to manage the workflow, so go to your redux store file and add:\r\n\r\n```javascript\r\nimport { configureStore } from  '@reduxjs/toolkit';\r\n...\r\nimport loginReducer from '@flowbuild/redux-toolkit-workflow-manager/login.slice';\r\nimport WorkflowManagerSlice from '@flowbuild/redux-toolkit-workflow-manager/workflowManager.slice';\r\n\r\nconst  store  =  configureStore({\r\n  reducer: {\r\n    ...\r\n    login: loginReducer,\r\n    workflowManager:  WorkflowManagerSlice(YOUR_HOST),\r\n    ...\r\n  },\r\n});\r\n```\r\n\r\n#### Adding Workflow Manager Tag\r\n\r\nOk, 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).\r\n\r\n```javascript\r\nimport React from 'react';\r\n...\r\nimport { Provider } from  'react-redux';\r\nimport { WorkflowManager } from  '@flowbuild/redux-toolkit-workflow-manager';\r\n\r\nimport store from  './redux';\r\n...\r\n\r\nconst App = () =\u003e {\r\n  return (\r\n    ...\r\n    \u003cProvider store={store}\u003e\r\n      \u003cWorkflowManager\u003e\r\n        \u003cNavigation /\u003e\r\n      \u003c/WorkflowManager\u003e\r\n    \u003c/Provider\u003e\r\n    ...\r\n  );\r\n}\r\n```\r\n\r\n#### Configuring navigation architecture to use nested router\r\n\r\nIf you already have a router implemented, don't worry, this change is easy to make. We need this to use navigation functions.\r\n\r\nUsing [`@react-navigation/stack`](https://reactnavigation.org/docs/getting-started), let's declare two consts with createStackNavigator hook.\r\n\r\n```javascript\r\n...\r\nimport { createStackNavigator } from '@react-navigation/stack';\r\n...\r\n\r\nconst RootStack = createStackNavigator();\r\nconst NestedStack = createStackNavigator();\r\n```\r\n\r\nYour 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).\r\n\r\n```javascript\r\nfunction NavigationWithRoutes({ navigation }) {\r\n  return (\r\n    \u003cNestedStack.Navigator\u003e\r\n      {/* Declare your screens here */}\r\n      \u003cNestedStack.Screen name={\"LoadingScreen\"} component={/* LoadingComponent */} /\u003e\r\n      \u003cNestedStack.Screen name={\"Home\"} component={/* HomeComponent */} /\u003e\r\n    \u003c/NestedStack.Navigator\u003e\r\n  );\r\n}\r\n```\r\n\r\nAfter that, let's create our function to be the root of navigation:\r\n\r\n```javascript\r\n...\r\nimport { NavigationContainer } from '@react-navigation/native';\r\n...\r\n\r\nexport function Navigation() {\r\n  \u003cNavigationContainer\u003e\r\n    \u003cRootStack.Navigator\u003e\r\n      \u003cRootStack.Screen name=\"NavigationWithRoutes\" component={NavigationWithRoutes} /\u003e\r\n    \u003c/RootStack.Navigator\u003e\r\n  \u003c/NavigationContainer\u003e\r\n}\r\n```\r\n\r\n#### Configuring automatic navigate\r\n\r\nLet'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.\r\n\r\n```javascript\r\nimport React, { useEffect } from  'react';\r\nimport { useWorkflowManager } from  '@flowbuild/redux-toolkit-workflow-manager/useWorkflowManager';\r\n...\r\n\r\nfunction NavigationWithRoutes({ navigation }) {\r\n  const {currentActivity, setNavigation} = useWorkflowManager();\r\n\r\n  useEffect(() =\u003e {\r\n    setNavigation(START_WORKFLOW_NAME, manageActivity);\r\n  }, [currentActivity]);\r\n\r\n  function manageActivity() { ... }\r\n \r\n  return (\r\n    ...\r\n  );\r\n}\r\n```\r\n\r\nAfter that, let's make the function to manage the navigate. Inside the `manageActivity` function, our code is:\r\n\r\n```javascript\r\nfunction manageActivity() {\r\n  const {\r\n    props: { action },\r\n  } = currentActivity;\r\n\r\n  if (pagesWorkflow[action]) {\r\n    navigation.navigate(ReferencesPages[action]);\r\n  }\r\n}\r\n```\r\n\r\n## Bugs?\r\n\r\n- [x] Did you try latest release?\r\n- [x] Did you look for existing matching issues?\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflow-build%2Freact-redux-workflow-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflow-build%2Freact-redux-workflow-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflow-build%2Freact-redux-workflow-manager/lists"}