Tag Archives: Reflux

Writing Declarative JS Application in React

via Writing Declarative JS Application in React.

Recently we’ve been building part of our internal product using the excellent ReactJS. Along with React, we use flux pattern (Reflux and then changed to Redux) to deal with data flow layer. We are by no means experts in React & Flux but we would like to share some of our experience here.

There will be several blog posts talking about some brief intro, practices, pattern and gotchas about React, Flux and Redux. To start with, this posts will talk a bit about React.

Writing a Basic App in Redux

via David and Suzi | Writing a Basic App in Redux.

I’ve been a bit heads down for the last two months, working on a project with React 0.12.2 and Reflux. In that course of time, the React ecosystem has begun to feel foreign to me. React is up to 0.14 beta, React-Router is up to 1.0 beta, a few ES6 and ES7 patterns have been popularized, and Redux has gained a large amount of support and momentum and arguably emerged as the Flux library of choice.

I’ve been wanting to look at Redux for a while, but the only way I can motivate myself to learn stuff like this is by doing write ups. So let’s build a simple Pokedex app that displays a list of Pokemon, has an search input field, and lets you click a button to catch some Pokemon. That’s it, intentionally contrived. Everything will be synchronous for now, but I’d ambitiously like to do writeups in the future that introduce the capabilities/usage of Redux Dev Tools, ImmutableJS, GraphQL, and server-side rendering.

[This article is being written specifically for those who have prior experience with React and Flux, but have not had any prior experience with Redux.]

Demo: http://davidchang.github.io/redux-pokedex/

Code: https://github.com/davidchang/redux-pokedex

The visual building of React components for UI

via react-ui-builder.

This tool is a visual builder of React JS components for your web application. In builder you can easily combine available components with each other, and see how they look and feel right on a web page. Then you can generate a source code of new component from the combination, and builder will include all children and dependencies. Moreover you can generate Reflux actions/store for your component.

The source code of newly created component can be edited right in the builder or in your favorite IDE – it doesn’t matter for builder, the source code will be automatically compiled and reloaded in builder’s pages.

You can include the source code of other third-party components manually ( ‘Builder’s projects source code structure’ section ). All newly created/included components are available for composing with other components, it means you can reuse your components and combine them with others.

Project’s source code is located in local folder on your computer. But you are not intended to create project from scratch because builder can download bootstrap project from a gallery of published projects. These projects already have components or libraries of components, and other helpful things like css/less/fonts files or webpack predefined configurations, etc.

To access projects gallery you can from the builder, also you can preview pages with components in selected project, and download source code of the project into specified local folder.

And finally, you can publish your own project into the gallery.

Feel free to ask questions in React UI Builder group

  • A gallery of bootstrap projects with reusable components and their predefined variants.
  • Generate source code for new component from any combination of other components.
  • Edit source code of the project in other IDEs, builder will reload changes automatically.
  • Generate Flux/Reflux actions/store for components.
  • Include and use third-party components in builder.
  • Publish own projects into the gallery.

The Reflux data flow model

The Reflux data flow model

At its heart, Reflux is really just a PubSub library. That is, we have a Publisher API for objects who transmit events, and a Subscriber API for objects who want to listen to such events.

There is however a paradigm shift in how Reflux expects you to structure your data flow, which can be hard to grasp initially. This post will try to explain this approach.