183. What is Redux Form?

     Redux Form works with React and Redux to enable a form in React to use Redux to store all of its state. Redux Form can be used with raw HTML5 inputs, but it also works very well with common UI frameworks like Material UI, React Widgets and React Bootstrap.

184. What are the main features of Redux Form?

     Some of the main features of Redux Form are:

     1. Field values persistence via Redux store.

     2. Validation (sync/async) and submission.

     3. Formatting, parsing and normalization of field values.

185. How to add multiple middlewares to Redux?

     You can use applyMiddleware().

     For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():

     import { createStore, applyMiddleware } from 'redux'
     const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
     

186. How to set initial state in Redux?

     You need to pass initial state as second argument to createStore:

     const rootReducer = combineReducers({
       todos: todos,
       visibilityFilter: visibilityFilter
     })
     
     const initialState = {
       todos: [{ id: 123, name: 'example', completed: false }]
     }
     
     const store = createStore(
       rootReducer,
       initialState
     )
     

187. How Relay is different from Redux?

     Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.

188. What is an action in Redux?

     Actions are plain JavaScript objects or payloads of information that send data from your application to your store. They are the only source of information for the store. Actions must have a type property that indicates the type of action being performed.

     For example, let's take an action which represents adding a new todo item:

     {
       type: ADD_TODO,
       text: 'Add todo item'
     }
     

189. What is the difference between React Native and React?

     React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

     React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

190. How to test React Native apps?

     React Native can be tested only in mobile simulators like iOS and Android. You can run the app in your mobile using expo app (https://expo.io) Where it syncs using QR code, your mobile and computer should be in same wireless network.

191. How to do logging in React Native?

     You can use console.log, console.warn, etc. As of React Native v0.29 you can simply run the following to see logs in the console:

     $ react-native log-ios
     $ react-native log-android
     

192. How to debug your React Native?

     Follow the below steps to debug React Native app:

     1. Run your application in the iOS simulator.
     2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui.
     3. Enable Pause On Caught Exceptions for a better debugging experience.
     4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
     5. You should now be able to debug as you normally would.

React supported libraries & Integration

192. What is reselect and how it works?

     Reselect is a selector library (for Redux) which uses memoization concept. It was originally written to compute derived data from Redux-like applications state, but it can't be tied to any architecture or library.

     Reselect keeps a copy of the last inputs/outputs of the last call, and recomputes the result only if one of the inputs changes. If the the same inputs are provided twice in a row, Reselect returns the cached output. It's memoization and cache are fully customizable.