Get current state inside model and make a http request about cycle-onionify HOT 3 CLOSED

@AndrejSperling That seems like a decent approach to me given what I know of your app so far.

I suppose the original question was answered so I'll close this issue. :)

from cycle-onionify.

Hi @AndrejSperling! Glad to hear you are starting with reactive programming and I hope to help you in your journey (if you need more quick help, the gitter chat for Cycle.js is great)

With Cycle.js, it helps to think "all external reads come from sources" and "all external writes go to sinks". So in this case, you want to

1. read the current state and
2. write an http request.

So you need to

1. use sources.onion to get the state
2. produce a stream of http request to send as sink

This is already half of the solution. I noticed you have submitReducer$ depending on intent.submit$ but the reducer itself is just a clone of the previous state. Reducers are for writing state, but submitReducer$ is not actually performing a reasonable write. (Important detail: that said, reducers are functions that read the previous state and deliver the new state, but you should view this as just a transaction, like a database transaction) Also, submitReducer$ should not be used for reading state as you attempted with const submitForm$ = submitReducer$.map(.

So it seems to me the solution should look like

const submitForm$ = intent.submit$
  .compose(sampleCombine(sources.onion.state$))
  .map(([submitEvent, state]) => ({
    url: 'http://localhost:8080/api/notecard',
    method: 'POST',
    category: 'post-notecard',
    send: {
      'title': state.title,
      'description': state.description,
      'tags': state.tags,
    }
  }))

The key here is to use the sampleCombine operator from xstream. It makes the output emit only when intent.submit$ emits, but samples the latest state from sources.onion.state$. This will make the submitForm$ which we use as a sink in order to write an HTTP request.

Does that answer?

from cycle-onionify.

Thank you for the detailed answer. It helped me to understand the concept even better. Everything works fine now.

If you don't mind to answer. What would the best way to validate the form data?
Is it a good practise to save the errors in state? Or would a extra stream be better?
Currently I changed the functionality of submitReducer$ to validate the state by saving the errors in state.

const submitReducer$: Stream<Reducer> = intent.submit$
        .map(submit => function submitReducer(state) {
            if (state.title == "") {
                state = Object.assign({}, state, {
                            errors: {
                                  title: "Title is required"
                            }
                        });
            } 

        ...

        return state;

        });

from cycle-onionify.