171. What is the purpose of the constants in Redux?
Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a `ReferenceError` immediately.
Normally we will save them in a single file (`constants.js` or `actionTypes.js`).
```javascript
export const ADD_TODO = 'ADD_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const EDIT_TODO = 'EDIT_TODO'
export const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
```
In Redux you use them in two places:
1. **During action creation:**
Let's take `actions.js`:
```javascript
import { ADD_TODO } from './actionTypes';
export function addTodo(text) {
return { type: ADD_TODO, text }
}
```
2. **In reducers:**
Let's create `reducer.js`:
```javascript
import { ADD_TODO } from './actionTypes'
export default (state = [], action) => {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
];
default:
return state
}
}
```
172. What are the different ways to write `mapDispatchToProps()`?
There are a few ways of binding *action creators* to `dispatch()` in `mapDispatchToProps()`. Below are the possible options:
```javascript
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
```
```javascript
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
})
```
```javascript
const mapDispatchToProps = { action }
```
The third option is just a shorthand for the first one.
173. What is the use of the `ownProps` parameter in `mapStateToProps()` and `mapDispatchToProps()`?
If the `ownProps` parameter is specified, React Redux will pass the props that were passed to the component into your *connect* functions. So, if you use a connected component:
```jsx harmony
import ConnectedComponent from './containers/ConnectedComponent';
<ConnectedComponent user={'john'} />
```
The `ownProps` inside your `mapStateToProps()` and `mapDispatchToProps()` functions will be an object:
```javascript
{ user: 'john' }
```
You can use this object to decide what to return from those functions.
174. How to structure Redux top level directories?
Most of the applications has several top-level directories as below:
1. **Components**: Used for *dumb* components unaware of Redux.
2. **Containers**: Used for *smart* components connected to Redux.
3. **Actions**: Used for all action creators, where file names correspond to part of the app.
4. **Reducers**: Used for all reducers, where files name correspond to state key.
5. **Store**: Used for store initialization.
This structure works well for small and medium size apps.
175. What is redux-saga?
`redux-saga` is a library that aims to make side effects (asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.
It is available in NPM:
```console
$ npm install --save redux-saga
```
176. What is the mental model of redux-saga?
*Saga* is like a separate thread in your application, that's solely responsible for side effects. `redux-saga` is a redux *middleware*, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.
177. What are the differences between `call()` and `put()` in redux-saga?
Both `call()` and `put()` are effect creator functions. `call()` function is used to create effect description, which instructs middleware to call the promise. `put()` function creates an effect, which instructs middleware to dispatch an action to the store.
Let's take example of how these effects work for fetching particular user data.
```javascript
function* fetchUserSaga(action) {
// `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
// Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
const userData = yield call(api.fetchUser, action.userId)
// Instructing middleware to dispatch corresponding action.
yield put({
type: 'FETCH_USER_SUCCESS',
userData
})
}
```
178. What is Redux Thunk?
*Redux Thunk* middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods `dispatch()` and `getState()` as parameters.
179. What are the differences between `redux-saga` and `redux-thunk`?
Both *Redux Thunk* and *Redux Saga* take care of dealing with side effects. In most of the scenarios, Thunk uses *Promises* to deal with them, whereas Saga uses *Generators*. Thunk is simple to use and Promises are familiar to many developers, Sagas/Generators are more powerful but you will need to learn them. But both middleware can coexist, so you can start with Thunks and introduce Sagas when/if you need them.
180. What is Redux DevTools?
*Redux DevTools* is a live-editing time travel environment for Redux with hot reloading, action replay, and customizable UI. If you don't want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox.
181. What are the features of Redux DevTools?
1. Lets you inspect every state and action payload.
2. Lets you go back in time by *cancelling* actions.
3. If you change the reducer code, each *staged* action will be re-evaluated.
4. If the reducers throw, you will see during which action this happened, and what the error was.
5. With `persistState()` store enhancer, you can persist debug sessions across page reloads.
182. What are Redux selectors and why to use them?
*Selectors* are functions that take Redux state as an argument and return some data to pass to the component.
For example, to get user details from the state:
```javascript
const getUserData = state => state.user.data
```
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?
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()`:
```javascript
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:
```javascript
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.
Comments
Post a Comment
please do not enter any spam link in the comment box