Edit me

Redux

Redux general information

**Redux** is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. We use redux module for Angular - https://github.com/angular-redux/ng-redux

Actions in redux

**Actions** are payloads of information that send data from your application to your store. They are the *only* source of information for the store. You send them to the store using [`store.dispatch()`](../api/Store.md#dispatch).

Here's an example action which represents adding a new todo item:

const ADD_TODO = 'ADD_TODO'

{
type: ADD_TODO,
text: 'Build my first Redux app'
}

Actions are plain JavaScript objects. Actions must have a `type` property that indicates the type of action being performed. Types should typically be defined as string constants. Once your app is large enough, you may want to move them into a separate module. 

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

Action Creators

**Action creators** are exactly that—functions that create actions. It's easy to conflate the terms “action” and “action creator,” so do your best to use the proper term.

In Redux action creators simply return an action:

function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

This makes them portable and easy to test.

To actually initiate a dispatch, pass the result to the `dispatch()` function:

dispatch(addTodo(text))
dispatch(completeTodo(index))

Alternatively, you can create a **bound action creator** that automatically dispatches:

const boundAddTodo = (text) => dispatch(addTodo(text))
const boundCompleteTodo = (index) => dispatch(completeTodo(index))

Now you'll be able to call them directly:

boundAddTodo(text)
boundCompleteTodo(index)

The `dispatch()` function can be accessed directly from the store as [`store.dispatch()`](../api/Store.md#dispatch), but more likely you'll access it using a helper like [react-redux](http://github.com/gaearon/react-redux)'s `connect()`. You can use [`bindActionCreators()`](../api/bindActionCreators.md) to automatically bind many action creators to a `dispatch()` function. Action creators can also be asynchronous and have side-effects. You can read about [async actions](../advanced/AsyncActions.md) in the [advanced tutorial](../advanced/README.md) to learn how to handle AJAX responses and compose action creators into async control flow. Don't skip ahead to async actions until you've completed the basics tutorial, as it covers other important concepts that are prerequisite for the advanced tutorial and async actions.

Source Code

`actions.js`
/*
* action types
*/

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
* other constants
*/

export const VisibilityFilters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
* action creators
*/

export function addTodo(text) {
return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
return { type: SET_VISIBILITY_FILTER, filter }
}

Usage within PulseTile

We are using redux architecture and especially reducers and actions in order to unify the data flow within the project. The goal we are achieving this way is, basically, the unification of the application's state and data flows in terms of responses we're proceeding on the front-end. You can see the examples of Main reducer file, where all the other reducers are included. As well, module-specific reducer file , where the state management is handled. Here is a module-specific example of action file, where all the actions that should be taken care of by redux is described.

Q: Why was Redux chosen?
  • An acceptable choice, with equal benefits to Angular's state management system
  • Not really gaining benefits at this stage, but as the system grows it could prove very useful
Q: What benefits are gained from using Redux

A: There are a couple of them, and the main ones:

  • Scalability when state becomes complex
  • A robust platform for future development
Q: Do we know what the driver choose Redux? It seems we are tied to that technology now, so although it may be a great fit we are still unclear what drove that decision and whether it was the right one.

A: It seems the Redux code is clearly delineated from the Angualr code, meaning that we aren't completely tied to the technology choice if it proves to be more of a hindrance than a benefit.