Data fetching

This example shows how you can fetch remote data and present them in the interface.

Action node

flower.json

{
  "type": "component",
  "isAction": true,
  "name": "FetchArticles",
  "title": "Fetch articles",
  "category": "actions",
  "editing": [],
  "output": {}
}

index.js

const FetchArticles = ({ flowName, reducerName }) => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch({
      type: 'articles/fetch',
      payload: { flowName, reducerName }
    })
  }, [])

  return <Loading />
}

Do not forget to add FetchArticles to Flower.registerComponents().

Saga

function* fetchArticles({ payload }) {
  const { flowName, reducerName } = payload
  const data = yield call(makeHttpRequestToGetArticles)
  yield put({ type: 'articles/fetchSuccess', payload: data })
  yield put({ type: 'flower/next', payload: { flowName, reducerName } })
}

function* articlesSaga() {
  yield takeEvery('articles/fetch', fetchArticles)
}

Notice that two actions are dispatched: one to send data to the appropriate reducer, the other to notify Flower to go to the next node.

Reducer

function articlesReducer(state, action) {
  switch (action.payload) {
    case 'articles/fetchSuccess':
      return { ...state, list: action.payload }
    default:
      return state
  }
}

Flower

Add a FetchArticles node and connect it to Start.

Add a node with the React component that should display your data (for instance a list), and connect it to FetchArticles.

The sequence is Start --> FetchArticles --> Node(React component inside)

The React component should be given an id of list, because that is the key in the reducer where data were saved. The component will then receive it in the value prop.

const List = ({ value }) => {
  // Map 'value' and generate a list of articles
}