rdx

Question 1

redux: to write a reducer, type

Answer 1

in reducers/classNameReducer.js

import { FETCH_CLASS_NAME, CREATE_CLASS_NAME } from ‘../actions/types.js’

const initialState = {
items: [],
items2: []
}

export default function (state = initialState, action) {
switch (action.type) {
case FETCH_CLASS_NAME:
return {…state, items: action.payload} // spread prior state, then overwrite the key
case CREATE_CLASS_NAME:
return {…state, items2: [{id:30, title: ‘string’}, …state.items]}
default:
return state
}
}

Question 2

redux: To map parts of the state that come in from your reducer to this.props,

and to map action functions to this.props, type

Answer 2

import {connect} from ‘react-redux’

const mapStateToProps = (state, props) => ({
propName: state.nameInRootReducer.items,
propName2: state.nameInRootReducer.items2
})

const mapDispatchToProps = {
actionFunc1: thunkFunc1,
actionFunc2: actionFunc2
}

…

export default connect(mapStateToProps, mapDispatchToProps)(componenName);

remember:
not export default function

notes:
bindActionCreators in mapDispatchToProps is optional, and if you just use an object literal it happen automatically.
https://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/

Question 3

redux: To create a thunk action creator, type

Answer 3

in actions/classNameActions.js

import { FETCH_CLASS_NAME, CREATE_CLASS_NAME } from ‘./types’

note: This is a thunk, not an action creator

export const fetchClassName = () => (dispatch) => {
  fetch('http://url.com/')   
  .then(response => response.json())
  .then(data => dispatch({
    type: FETCH_POSTS,
    payload: data // dispatch is like pub sub, i can send data to any reducer from here
    }))
}

note: dispatch hes to be called in the thunk creator because that where the promise will resolve asynchronously.

Question 4

promises are necessary when you are

Answer 4

relying on the return value of a function

Question 5

To return a new object that combines multiple objects into one, type

Answer 5

Object.assign({}, {key: ‘string’}, {key2: ‘string2’})
or
{…{}, …{key: ‘string’}, …{key2: ‘string2’}}

Note: Repeated names will be overwritten by the later name.

Question 6

The two ways to define a method in an object literal are

Answer 6

{ 
  key: "string",
  funcName() {
    return "Luke"
  },
}
Note: still requires commas
or
{ 
  key: "string",
  funcName: function() {
    return "Luke"
  }
}

Question 7

To be able to call a function using objectName.funcName = “string” and have the object you put after the = be used as the parameter, type

Answer 7

{
  set funcName(param) {
    this.privateVarName.push(param);
  },
  privateVarName: []
}

Note: Private vars are not accessible from instances because they don’t use this.varName

Question 8

the get and set keywords do work in

Answer 8

object literals, as well as constructor functions and classes.

Question 9

To create a getter function that can be called without using (), type

Answer 9

{
  get funcName() { 
    return "string"
  }
}

Question 10

To generate a class based component with all lifecycle methods in vscode, type

Answer 10

rcfc tab

Question 11

To generate a functional component in vscode, type

Answer 11

rscp

Question 12

Only if you do not set mapDispatchToProps, you can use

Answer 12

this.props.dispatch({type: ‘INCREMENT’})

Question 13

redux automatically adds

Answer 13

as this.props.dispatch() in your component if you do not set mapDispatchToProps()

Question 14

an action is

Answer 14

an object with type and payload

{type : “ADD_TODO”, payload : “string”}

Question 15

converting an actionCreator into a closure is only necessary if

Answer 15

you need to make an async call before dispatching.

Note: You can dispatch before and after too.

Question 16

thunk: converting an actionCreator into a closure is only necessary if

Answer 16

you need to make an async call before dispatching.

Note: You can dispatch before and after too.

Question 17

best redux tutorial, aside from calling mapDispatchToProps mapActionsToProps, is

Answer 17

https://www.youtube.com/watch?v=OSSpVLpuVWA

and potentially for saying bindActionCreators is necessary

Question 18

use this for the redux chrome dev tools

Answer 18

https://youtu.be/OSSpVLpuVWA?t=1355

Question 19

rn: you should not use this.setState() in

Answer 19

componentDidMount

Question 20

to make initial api request for data, use

Answer 20

componentDidMount

Question 21

a thunk action can

Answer 21

dispatch an actionCreator from above it in the actions file.

Question 22

need to learn the proptype shortcuts

Answer 22

rpt

pta
ptb
ptr
ptn
pto
pts

https://marketplace.visualstudio.com/items?itemName=sledsworth.react-redux-es6-snippets

Question 23

The proptype shortcuts are

Answer 23

rpt to create main, then

pta
ptb
ptf
ptn
pto
pts

note: add r to end for required
https: //marketplace.visualstudio.com/items?itemName=sledsworth.react-redux-es6-snippets

Question 24

React: To add a key to a list that is being mapped into JSX, type

Answer 24

const itemArray = [‘string1’, ‘string2’, ‘string3’];

const myJxsArray = itemArray.map((item, key) =>
  -li key={key}>{item}-/li>
);

Question 25

redux thunk knows when you are using a synchronous actionCreator vs an asynchronous one because

Answer 25

you are passing a function that returns a function into the dispatch function, instead of an object or a function that returns an object, memorize media queries

Question 26

to install redux, type

Answer 26

npm install redux react-redux redux-thunk –save

Question 27

make sure to export

Answer 27

the constants in types.js

Question 28

the two ways to write mapDispatchToProps are

Answer 28

const mapDispatchToProps = (dispatch) => ({
fetchClassName: () => dispatch(fetchClassName())
})
note: this works exactly the same for thunk creators and action creators.
or
import { bindActionCreators } from ‘redux’
const mapDispatchToProps = (dispatch) => bindActionCreators({
fetchClassName: fetchClassName,
}, dispatch)
or
const mapDispatchToProps = {
fetchClassName: fetchClassName,
}
using an object like this is recommended

Question 29

react: The attributes input fields should have are

Answer 29

onChange={this.handleChange} value={this.state.inputField}

Question 30

the redux workflow is

Answer 30

add the event handler and make up the name
onClick={this.props.handleInputClick}

then add that name to mapDispatchToProps
const mapDispatchToProps = {
 handleInputClick: handleInputClick,
}

then import it from actions. If it is effecting a model different model create a new name to put before Actions
import {handleInputClick} from ‘./actions/emailActions’

create the type in types
export const HANDLE_INPUT_CLICK = "HANDLE_INPUT_CLICK"

Create or use a reducer that updates state

Add new reducers to root reducer

Add to mapSateToProps to access the state change.

Question 31

need to memorize how to import and use custom components, memorize how to create a basic component, learn how to make a navbar in flexbox

Answer 31

structure should be in components, display and container, push pop, shift, ushift, replace(), find, slice(), dict.keys(), Array(5), learn all the loops off by heart, and fo similar for python range, slice, len, split an array being looped into its parts in python and JS. print(‘’, ‘’) prints both with a space in between. Learn the python built in functions, learn how to add defaults to python function, and js function, learn global in python, I def need to memorize random for python and js.

Question 32

components are named in

Answer 32

CapitalCase

Question 33

To create a basic component, type

Answer 33

ComponentName.js

import React, { Component } from ‘react’;
import PropTypes from ‘prop-types’;

class ComponentName extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return ...
  }
}

ComponentName.propTypes = {

};

export default ComponentName;

Question 34

components file extension is

Answer 34

.js

Question 35

To import a custom component, type

Answer 35

import ComponentName from ‘./components/ComponentName.js’

-ComponentName />

Question 36

To make a fetch request of just JSON, type

Answer 36

fetch("url.com", {
    method: "POST",
    body: JSON.stringify({key: 'value'})
    headers: new Headers({
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
      'Authorization': 'Token ' + authKey
    })
})

Question 37

The three ways render components on a condition are

Answer 37

{ x > 10 andand -ComponentName /> }

{ false || -ComponentName /> }

{ x > 10 ? -ComponentName /> : -ComponentName2 /> }

Question 38

function creation workflow

Answer 38

1) name the function (should do one thing, start with verb)
2) use pseudocode to write steps
3) declare the vars you will use at top of function
4) If it needs to do 2 things, create a second function and trigger it at the bottom.

Question 39

the json rules are

Answer 39

keys must use double quotes
no trailing commas
white space doesnt matter

Question 40

an action creator is just a function that return an object

Answer 40

function that return an object, and that object is called an action, but is just {‘type’: TYPE_NAME, dataKey: ‘value’}

Question 41

A context is essentially

Answer 41

a container component but if you add variables to the context, they are available for all children components automatically.

Question 42

To make a functional component only render once, tyoe

Answer 42

React.memo around it

React.memo(function ContainerComponent() {
  return (
    -div />
  );
})