1. How to structure Redux top level directories?
Most of the applications has several top-level directories as below 1. Components Used for “dumb” React components unaware of Redux 2. Containers Used for “smart” React components connected to Redux 3. Actions Used for all action creators, where file name corresponds to part of the app 4. Reducers Used for all reducers, where file name corresponds to state key 5. Store Used for store initialization This structure works well for small and mid-level size apps.
2. What are the core principles of Redux?
Redux follows three fundamental principles: 1. Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. 2. State is ready only: The only way to change the 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. 3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers(Reducers are just pure functions that take the previous state and an action, and return the next state).
3. Are there any similarities between Redux and RxJS?
These libraries are very different for very different purposes, but there are some vague similarities.
Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs. Think of it as an alternative to (half of) Angular.
Redux uses the Reactive paradigm little bit because the Store is reactive. The Store observes actions from a distance, and changes itself. RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives you basic building blocks, Observables, to accomplish this "observing from a distance" pattern.
4. What are the downsides of Redux over Flux?
Instead of saying downsides we can say that there are few compromises of using Redux over Flux. Those are as follows: 1. You will need to learn avoiding mutations: Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or your team to write non-mutative code. 2. You're going to have to carefully pick your packages: While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a young but rich ecosystem. This means most packages are new ideas and haven't received the critical mass of usage yet 3. There is no nice Flow integration yet: Flux currently lets you do very impressive static type checks which Redux doesn't support yet.
5. Benefits of Redux?
- Maintainability: The maintenance of Redux becomes easier due to strict code structure and organization.
- Organization: code organization is very strict hence the stability of the code is high which intern increases the work to be much easier.
- Server rendering: This is useful, particularly to the preliminary render, which keeps up a better user experience or search engine optimization. The server-side created stores are forwarded to the client-side.
- Developer tools: It is Highly traceable so changes in position and changes in the application all such instances make the developers have a real-time experience.
- Ease of testing: The first rule of writing testable code is to write small functions that do only one thing and that are independent. Redux’s code is made of functions that used to be: small, pure, and isolated.
6. Where can Redux be used?
Redux is majorly used is a combination with reacting. it also has the ability to get used with other view libraries too. some of the famous entities like AngularJS, Vue.js, and Meteor. can get combined with Redux easily. This is a key reason for the popularity of Redux in its ecosystem. So many articles, tutorials, middleware, tools, and boilerplates are available.
7. 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.
8. How is state changed in Redux?
The only way to change the 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. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
9. What is the need of Redux OR Why we use Redux?
Suppose, you need to pass data in between such components that don't have any relationship (parent-child), so while making communication between such components, it is difficult to pass data and maintaining them is also a very difficult task.
There are three possible solution to solve this probelm.
- Context API
- Hookes - useContext + useReducer
In such a case redux is very useful because Redux eliminates the need to continuously pass data from one component to another component.
If you are using redux with react, states will no longer need to be lifted up
Everything is handled by Redux itself.
10. How Redux Works - Redux Workflow?
Redux allows you to manage the state of the application using single source of truth, called Store, Any Component can directly access the state from the Store using Subscribe method.
Let's understand the Redux workflow step by step:
- Store - Redux offers a solution of storing all your application's state at one place, called store.
- Action - Actions can be dispatch based on the Event (e.g. OnClick, OnChange, etc).
- Reducer - Reducers are the pure functions which takes the previous state and an action, and return the next state. (Always return new state objects, instead of mutating the previous state).
- Subscribe - Any components can easily subscribe to store.
- In Redux, components don't communicate directly with each other, but rather all state changes must go through the single source of truth, the store.