Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

React 知识点 > Redux > Flashcards

Redux Flashcards

1
Q

When redux is useful? What are the other options?

A

Redux is useful to share data with different components.

props (lifting state), react context and redux

props is the simplest and redux the more powerful and complex.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the 3 principles of Redux?

A

1 - One immutable store;
2 - Actions triggers changes;
3 - Reducers update state;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What a Reducer consists of?

A

a method containing the current state, an action to change the state and it returns a new state

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the philosophy of redux?

A

data goes down and actions go up

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is a Reducer?

A

A pure function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the three common ways to do immutable updates?

A

object.assign, spread operator and map/filter/reduce.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is a common pitfall of immutability of nested objects? Is that always an issue?

A

The clone is shallow and won’t clone inner objects. Not always an issue because you only need to clone stuff you’ll actually change.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the danger in the clone-deep?

A

It clones everything and is likely to cause excessive re-renders.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the most common lib to have immutability out-of-the-shelf?

A

Immer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is an action? What property the action must have?

A

Represents user intent. Must have a type. Can have anything else extra to the type…

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

When an action is dispatched, how many reducers will be notified?

A

All of them, always.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

From redux perspective, what are the differences between container and presentation components?

A

in simple terms: only containers know redux

detailed here: https://pasteboard.co/JmfOcHE.png

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

When reselect is a good choice? what does it do?

A

when selectors (mapStateToProp) do expensive operations. it does memoization

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the two most common ways to mapDispatchToProps?

A

using bindActionCreators or returning an object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why binding in the constructor is better than binding directly in the onChange assignment?

A

Because binding in the assignment will cause a new function to be allocated everytime the component renders.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a class field and what does it do the bindings?

A

A class field is an arrow function that receives an event as argument. It removes the need of bindings.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Why an arrow function removes the need of bindings?

A

Because “Arrow functions inherit the binding context of their enclosing scope”. Therefore, the this keyword is actually referring to the scope - as you might expect.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What does a class field do the initialization of the state of a class? what is the main benefit?

A

it removes the need of defining constructor and also removes the need of “this.” keyword… less code!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Why react hooks is so attractive?

A

Because it pretty much removes the need of creating class components.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Why is it recommended to define the onSubmit event in the form instead of handling a button click?

A

For accessibility and usability reasons: the user will be able to hit enter and submit the form

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is an action creator? Can it be a anonymous object?

A

Is a function that creates an action object (remember, must have a type). Yes, as usual people use anonymous in js for everything.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Why is it important to always return a default in the reducer “type” switch?

A

Because all reducers are called, so if your reducer don’t care about the message that was dispatched, then it must return the same state it received.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is normalizing state shape? where to find more information?

A

State shape is how the state object is defined… having it as id: 1 {id: 1, name:”asd”} helps during find operations. See normalizing state shape in redux website.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Can i use something else other than a switch in the reducers to filter out the action type?

A

Yes, anything you want.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Does the name of the import must match the export default function/type?

A

No. Once it is an export default, you can name it anything you want.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Besides the initial state and the root reducer, what else can be applied in the CreateStore function?

A

You can applyMiddleware

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What is a common and recommended middleware to be applied in the redux store? Why?

A

reduxImmutableStateInvariant. So that it will warn you when someone mutate the store’s state.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is redux dev tools? What is the necessary import from redux to make it work?

A

Is a tool that allows playing with the application’s state directly in the browser. Necessary to import “copose” from redux.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

When is it a good idea to configure the store with a different initial state different than the default empty?

A

Seems to be more useful for server side to do some sort of re-hydrate.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Where is a good place to put the Provider? Which lib does it come from? What param does the Provider need?

A

The (declarative) Provider must wrap the Router and the App. Comes from the react-redux lib. The provider needs the ConfigureStore as param.

31
Q

What to do with the warning dispatch is missing in the props validation?

A

need to import propTypes from “prop-types” and then declare that dispatch is required.

32
Q

How to connect a component to redux? Is the mapDispatchToProps required?

A

By decorating the export of the component with the Connect function. mapDispatchToProps is not required and will be auto injected by the lib.

33
Q

What dos the bindActionCreator do internally?

A

It wrapps the method passed as the first argument so that it mimics its call and then forward to the dispatcher (second argument).

34
Q

How to store the strings of each action?

A

as constant in a new file inside the action folder

35
Q

Why mocking api is a good idea? How to simulate slow APIs? Which is a lib to mock the API?

A

Speeds development. By using setTimeout. jsonServer

36
Q

Is fetch builtin in the browsers? also legacy ones?

A

fetch is builtin in modern browsers.

37
Q

Where to store environment variables?

A

in webpack.config.dev.js… any webpack config used

38
Q

what is run-p in npm? when is it useful?

A

run parallel… useful to start more than one project at once.. e.g: front and backend.

39
Q

What does Redux Middleware do?

A

Allow us to insert our own logic after an action is dispatched and before it is processed by the reducer.

40
Q

What are 4 common usages of Redux Middleware?

A

handling async api calls
logging
crash reporting
routing

41
Q

Should we always create our own middleware? What is the most common lib to handle asyncs?

A

No… there are several libs available. redux-thunk

42
Q

What is a Thunk? What is its main benefit?

A

a function that returns a function. Components won’t be aware on how action creators are implemented, neither if are sync or async.

Keep the code simple, widely used.

43
Q

What are the three main reasons of using async middleware?

A

Consistency;
Purity;
Easier Testing

44
Q

What to do when the this.props becomes very repetitive in the source code?

A

it is recommended to {desestructure, all, the, props} = this.props

45
Q

How to make the componentDidMount not fetch data from the API all the time?

A

By checking the length of the data arrays before dispatching the action.

46
Q

When the history object is available to a react component? Where to get it?

A

When the component is loaded by the element. Available in the props.

47
Q

What is an optimistic update?

A

Is when we update the UI immediately after the user does the action, therefore not waiting for the success return of an api call.

48
Q

Are fragments preferable over divs to tie components together?

A

Yes. So we avoid needless elements in the DOM.

49
Q

How to create a toast in react?

A

By using react-toastify lib

50
Q

What does async/await use behind the scenes on JS? Why using it then?

A

It uses promises. Make more clear when a method is actually async.

51
Q

Why using Enzyme for testing? What Enzyme runs behind the scenes? What does it uses to render the DOM?

A

Enzyme is very user friendly. Uses React Test Utils. Uses JSDOM to render the DOM.

52
Q

What is Jest? Is it a lib?

A

Jest is the most famous js testing FRAMEWORK.

53
Q

How does Jest finds the tests if it only requires “test”: “jest” config in the packages.json?

A

jest automatically finds test in files that end in .test.js or spec.js.

54
Q

Does jest need any other config than packages.json?

A

Yes… add mock for file and style. Also add ignored file extensions

55
Q

What is a test snapshot? What is the value behind it?

A

A snapshot is a pre-rendered component in a given state (usually defined in the testcase itself) which protect us from causing undully changes to the component output.

56
Q

What is the differente between shallow and mount on Enzyme?

A

shallow renders a single component and mount renders the component with children.

57
Q

What is the main Enzyme function to select HTML elements to test?

A

find

58
Q

What is a good trick to make the unit tests easier?

A

By creating a component factory method with default props and allow defining props externally as well.

59
Q

How to print the debug information of a JSX component (rendered HTML)? Will it show the assigned values in the props?

A

console.log(form.debug()). Yes, will show the assigned values in the props as well.

60
Q

What is the main difference of shallow and mount to keep in mind when testing?

A

Shallow will test JSX only (which is pretty much text) and mount will contain a !!RENDERED DOM!!.

61
Q

What are the main pro of shallow and mount?

A

shallow is fast and lightweight. Mount is slower but more realistic.

62
Q

When should I use mount?

A

When you want to test the dom or test interactions with the child components.

63
Q

What is a common alternative of Enzyme?

A

React testing library

64
Q

What is the philosophy of react testing library?

A

Write tests about what the users should see. Encouraging writting accessible components.

65
Q

Does react testing library contain a “shallow” form of rendering?

A

No. It always do a “mount”, due to its philosophy.

66
Q

What two main things when testing Redux components?

A

The markup itself and the behaviors

67
Q

Should I always wrap routed components in a MemoryRouter?

A

No, you might only pass down the necessary props such as history: {}

68
Q

Do I need to wrap a redux component in a provider along with a store to test it? are there other options?

A

Yes… it will show a very informative error in the console log. Exporting the component without the connect wrapper is a prefered option to keep the test simple.

69
Q

What is the hard part of testing Thunks? How to overcome?

A

Because it depends on the Store and make HTTP calls. Can be overcame by using redux-mock-store and fetch-mock.

70
Q

What kind of test we use to test the redux Store? which components does it involve? Does the course author like it? why?

A

integration tests. involves the integration between the action, store and reducers. he does like it because it covers a lot of code with few lines of code.

71
Q

Does the webpack generate physical files for development builds? What are these files?

A

NO. Only for production builds:
/build/index.html
/build/bundle.js
/build/styles.css

72
Q

What are the 8 items a production builds requires?

A 
lint and run tests;
bundle and minify JS and CSS;
Generate JS and CSS sourcemaps;
Exclude dev-specific concers;
Build React in production mode;
Generate bundle report;
Run the build on a webserver
73
Q

What is rimraf?

A

crossplatform package to delete files

74
Q

What else to configure other than the store and the packages.json?

A

Necessary to configure the webserver to redirect all the requests to the index.html. this is a SPA thing

React 知识点 (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions