ufocoder / redux-universal-boilerplate

Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)
MIT License
72 stars 19 forks source link

integrating async #12

Closed Jinnified closed 8 years ago

Jinnified commented 8 years ago

hi

i was trying to use async(http://caolan.github.io/async/docs.html#.series) on the server side, in server/index.js

I was trying to execute a series of functions, however the server hangs after the first function(one) been called, and the second function was never been reached

async.series({ one: function(callback) { setTimeout(function() { callback(null, 1); }, 200); }, two: function(callback){ setTimeout(function() { callback(null, 2); }, 100); } }, function(err, results) { // results is now equal to: {one: 1, two: 2} });

ufocoder commented 8 years ago

If you want to do some asynchronous operations run them into provide hooks decorator as variant, URL: https://github.com/ufocoder/redux-universal-boilerplate/blob/master/src/common/containers/Github/index.js#L7

ufocoder commented 8 years ago

@Jinnified Also you can implement redux middleware for your purpose or execute async operations into action creator like this https://github.com/ufocoder/redux-universal-boilerplate/blob/master/src/common/actions/Github.js#L25

Jinnified commented 8 years ago

well, i was trying to do some db query on the express side, say i was querying one table, and query another table and combine the result of 2, i can archive this by using nested callbacks, but it's be much easy on the eyes if i can use library such as 'async' to do so. However the boilerplate doesn't seem to like that

ufocoder commented 8 years ago

@Jinnified Where you make query to your db, you can write link to gist with your part of code

BTW, I'm guessing you haven't got my previous comment totally. I try to write my position by other words:

There're two ways for perform async actions currently before server will render page for user:

  1. You can create actionCreator like Github in example for my boilerplate, where you can perform different calls (sync+async) and return from this actionCreator a promise, next you can use this actionCreator in provideHooks server will be waiting while it will be processed
  2. You can create a redux middleware where you can dispatch you action as you wish, but for this way you need to write more lines of code that in first way

I hope my comment will help you.

p.s. Anyway your current issue not about boilerplate

Jinnified commented 8 years ago

i was trying to use the 'async' module to do the db query in src/server/index.js and server out a json from the server. the code is something like below:

connection.query('select * from testnum1', (err, rows, fields) => {
    if (err) throw err;
    const result1 = rows[0].testnum1
    console.log('The result1 is: ', result1)
    query2(result1)
  })
function query2(result1) {
    connection.query('select * from testnum2', (err, rows, fields) => {
      if (err) throw err;
      console.log('The solution is: ', rows)
      const finalResult = +rows[0].testnum2 * +result1
      res.json(finalResult)
      connection.end()
    })
  }

in this particular case the final json result was the result of 2 queries. If i use 'async' waterfall, the syntax would be much clearer, could be something like this:

async.waterfall([
    function(query1) {
        query1(null, 'one', 'two');
    },
    function(arg1, arg2, query2) {
        // arg1 now equals 'one' and arg2 now equals 'two'
        query2(null, 'three');
    }
], function (err, result) {
    // result now equals 'done'
});

the waterfall will guarantee that the functions in the array will get executed in order. However as long as i use any methods that provided by the async library such as 'waterfall' or 'seriers', the express server will just hang, i dont know if it's related to the boilerplate as i can see no error message anywhere.

Jinnified commented 8 years ago

and here is the example of async and express working together: http://www.pseudobry.com/let-express-js-and-async-js-make-your-life-easier/

ufocoder commented 8 years ago

I've got it. I think it's not a very good idea to fetch db in UI application

BTW If you have isomorphic library that works with db you could use provideHooks. If you want to execute several queries only on server side before page rendering wrap trigger method in server entry point (file path is src/common/server/index.js).

Jinnified commented 8 years ago

i know it's very bad practice, ideally you should talk to an api for data, but sometimes, you just dont have that luxury

Jinnified commented 8 years ago

on the other note, what you think of the idea of dispatching an fetch action in componentWillMount, compare to using provideHooks for the initial state ? Which by the look of it, they both archive the same thing