Flux architecture making state mutation predictable by imposing certain restrictions on how and when updates can happen.

1. FLUX
Naukri FED

2. 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.

3. 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.

4. Client side MVC
React 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.

5. Motivation behind flux
Single-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.

6. Now, the Flux Architecture
Flux is promoted by Facebook
It’s not a framework but a Design Pattern
It utilizes unidirectional data flow.

7. 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.

8. Action
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().
const ADD_TODO = 'ADD_TODO'
const action = {
type: ADD_TODO,
text: 'Build my first Redux app'
}
store.dispatch(action)

9. Reducer
The 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
}

10. Store
The 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()

11. Data flow
The 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.

12. Async flow
Redux 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))
)
}
}

13. Thanks
Q & A