Flux. Redux
Flux
FLUX
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
Flux parts
- Dispatcher
- Store
- Action
- Views
Dispatcher
The dispatcher receives actions and dispatches them to stores that have registered with the dispatcher. Every store will receive every action. There should be only one singleton dispatcher in each application.
Store
- A store is what holds the data of an application
- The data in a store must only be mutated by responding to an action
- Every time a store's data changes it must emit a "change" event
Actions
Actions define the internal API of your application. They capture the ways in which anything might interact with your application. They are simple objects that have a "type" field and some data.
Views
- Data from stores is displayed in views
- When a view uses data from a store it must also subscribe to change events from that store
- Actions are typically dispatched from views
{
type: 'delete-todo',
todoID: '1234'
}Flow of data
Example
ImmutableJS
REDUX
Don't create "Mentos and Coke"
Main principles
- Single source of truth
- State is read-only
- Changes are made with pure functions
Redux parts
- Actions
- Reducers
- Store
Actions
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.
function addTodo(text) {
return {
type: 'ADD_TODO',
text
};
}
dispatch(addTodo(text));
const boundAddTodo = (text) => dispatch(addTodo(text));
boundAddTodo(text);Reducers
Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of reducers.
The reducer is a pure function that takes the previous state and an action, and returns the next state.
(previousState, action) => newStateThings 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 todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
];
case TOGGLE_TODO:
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
});
}
return todo;
});
default:
return state;
}
}
function visibilityFilter(state = SHOW_ALL, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
}
function todoApp(state = {}, action) {
return {
visibilityFilter: visibilityFilter(state.visibilityFilter, action),
todos: todos(state.todos, action)
};
}
const todoAppUsingCombine = combineReducers({
visibilityFilter,
todos
});Store
The Store is the object that brings Actions and Reducers 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)
let store = createStore(todoApp);Flow of data
Example
Flux vs Redux
- Redux is an implementation of "Facebook Flux"
- Redux does not have the concept of a Dispatcher
- Redux has just a single store
- Redux assumes you never mutate your data
- Flux makes it unnatural to reuse functionality across stores, Redux has Reducers composition
THE END
FluxRedux
By alexandrscherbak
