FLUX

Naukri FED

Flux“The action or process of flowing in or flowing out” - as defined in dictionary

Here,

Flux is an architecture that Facebook uses internally when working with React.

It is not a framework or a library. It is simply a new kind of architecture that

compliments React and the concept of Unidirectional Data Flow.

Traditional MVC● User request a URL as GET or POST.

● Controller maps request to an operation on

model.

● Model acknowledges update.

● View (browser) gets the new state.

● User see it as HTML.

Client side MVCReact to state

● Reflect state in UI● Trigger function on state change

Concept of data binding to keep sync between View and Model.

Concept of watchers to trigger function on state change.

It works great for a single component.

Motivation behind fluxSingle-page applications have become increasingly complicated.

If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update.

You will lose control over the when, why, and how of its state.

Reason is the mixing of two concepts :

- DOM Manipulation- Asynchronicity.

Now, the Flux Architecture

Flux is promoted by Facebook

It’s not a framework but a Design Pattern

It utilizes unidirectional data flow.

Redux 1. The state of your whole application is stored in an object tree within a single

store.

2. The only way to change the state is to emit an action, an object describing what happened.

3. To specify how the state tree is transformed by actions, you write pure

reducers.

ActionActions 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().

const ADD_TODO = 'ADD_TODO'

const action = {

type: ADD_TODO,

text: 'Build my first Redux app'

}

store.dispatch(action)

ReducerThe reducer is a pure function that takes the

previous state and an action, and returns the next

state.

Things you should never do inside a reducer:

● Mutate its arguments;

● Perform side effects like API calls and

routing transitions;

● Call non-pure functions, e.g. Date.now() or

Math.random().

function todoApp(state = initialState, action) {

switch (action.type) {

case ADD_TODO:

return Object.assign({}, state, {

todos: [

...state.todos,

{

text: action.text,

completed: false

}

]

})

default:

return state

}

}

StoreThe Store is the object that brings them together.

The store has the following responsibilities:

● Holds application state;

● Allows access to state via getState();

● Allows state to be updated via

dispatch(action);

● Registers listeners via subscribe(listener);

● Handles unregistering of listeners via the

function returned by subscribe(listener).

import { createStore } from 'redux'

import todoApp from './reducers'

let store = createStore(todoApp,

window.STATE_FROM_SERVER)

store.dispatch(addTodo('Learn about actions'))

let unsubscribe = store.subscribe(() =>

console.log(store.getState())

)

unsubscribe()

Data flowThe data lifecycle follows these 4 steps:

1. You call store.dispatch(action).

2. The Redux store calls the reducer function you gave it.

3. The root reducer may combine the output of multiple reducers into a single

state tree.

4. The Redux store saves the complete state tree returned by the root reducer.

Async flowRedux store only supports synchronous data

flow.

Asynchronous middleware like redux-thunk or

redux-promise wraps the store's dispatch()

method and allows you to dispatch something

other than actions, for example, functions or

Promises.

// store.dispatch(fetchPosts('reactjs'))

export function fetchPosts(subreddit) {

return function (dispatch) {

dispatch(requestPosts(subreddit))

return

fetch(`http://www.reddit.com/r/${subreddit}.json`)

.then(response => response.json())

.then(json =>

dispatch(receivePosts(subreddit, json))

)

}

}

ThanksQ & A