Redux Basics Flashcards
Explain Functional Programming Concepts
- Functions as first class objects
- capability to pass functions in the format or arguments
- capable to controle flow using recursion, functions,. arrays
- helper functions such as reduce, map, filter are used
- allows linking functions together
- state is immutable
What is redux?
Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with ReactJS, or with any other view library. It is tiny (about 2kB) and has no dependencies.
What is flux?
Flux is an application design paradigm used as a replacement for the more traditional mvc pattern. It is a new kind of architecture that complements React and the concept of Unidirectional Data Flow. The workflow between dispatcher, stores and views components with distinct inputs and outputs.
Action creators are helper methods, collectedd into a lib, that create an action from method params, assign a type and provide the dispatcher.
Every action is sent to all stores via the callbacks the stores register with the dispatcher.
After stores update themselves in response to an action, they emit a change event.
Special View called controller-views listen for change events, retrieve the new data from the stores and provide the new data to the entire tree of their child views.
Describe how events are handled in React?
In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.
What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.
What are the compromises of Redux over Flux?
-state is immutable
-third party packages aren’t as evolved.
-
How to access redux store outside a react component?
Yes.You just need to export the store from the module where it created with createStore. Also, it shouldn’t pollute the global window object.
Why should not we update the state directly?
the setState method needs to be used to schedule an update.
What are the different phases of a component lifecycle?
There are four different phases of a react component’s lifecycle:
- initialization: the react component prepares setting up the initial state and default props.
- mounting: the react compnent is read to mount to the browser DOM. ComponentDidMount and ComponentWillMount
- updating: in this phase the component gets updated, sending new props and updating the state. covers shouldComponentUpdate, componentWillUpdate, and componentDidUpdarte
- unmounting: the component is not needed and gets unmointed from the browser and the DOM. componentWillUnmount
Flux vs MVC?
traditional MVC great for seperation of concerns of data(Model), UI (view), logic(controller). but MVC architectures frequently encounter two main problems:
- poorly defined data flow: cascading updates accross views often lead to a tangled web of events which is difficult to debug.
- lack of data integrety: model data can be mutated from anywhere yielding unpredictable results across the UI.
With FLux pattern complex UIs no longer suffernfrom cascading updates. any given react component will be able to reconstruct its state basrd on the data provided by the store.
Controlled vs uncontrolled component?
- A controlled component is a component where React is in control and is the single source of truth for the form data.
- An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.
Though uncontrolled components are typically easier to implement since you just grab the value from the DOM using refs, it’s typically recommended that you favor controlled components over uncontrolled components. The main reasons for this are that controlled components support instant field validation, allow you to conditionally disable/enable buttons, enforce input formats, and are more “the React way”.
What is a side effect in React?
A “side effect” is anything that affects something outside the scope of the function being executed. These can be, say, a network request, which has your code communicating with a third party (and thus making the request, causing logs to be recorded, caches to be saved or updated, all sorts of effects that are outside the function.
How does the virtual DOM work?
React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
How is state changed in Redux?
the only way to change state is to emit an action, an object describing what happened. this ensures that neither the views nor the network callbacks will ever write directly to the state.
instead, they express an intent to transform the state.
because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for.
Actions are just plain objects that can be logged , serialized, stored, and later replayed for debugging or testing purps.
What is “store” in Redux?
Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners. The entire state is represented by a single store. Any action returns a new state via reducers. That makes Redux very simple and predictable.
What is a pure function?
In computer programming, a pure function is a function that has the following properties:
Its return value is the same for the same arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams from I/O devices).
Its evaluation has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or I/O streams).
Thus a pure function is a computational analogue of a mathematical function.
