rdx Flashcards by a w

redux: to write a reducer, type

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
}
}

How well did you know this?

Not at all

Perfectly

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

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/

How well did you know this?

Not at all

Perfectly

redux: To create a thunk action creator, type

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.

How well did you know this?

Not at all

Perfectly

promises are necessary when you are

relying on the return value of a function

How well did you know this?

Not at all

Perfectly

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

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

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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

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

How well did you know this?

Not at all

Perfectly

the get and set keywords do work in

object literals, as well as constructor functions and classes.

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

rcfc tab

How well did you know this?

Not at all

Perfectly

To generate a functional component in vscode, type

rscp

How well did you know this?

Not at all

Perfectly

Only if you do not set mapDispatchToProps, you can use

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

How well did you know this?

Not at all

Perfectly

redux automatically adds

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

How well did you know this?

Not at all

Perfectly

an action is

an object with type and payload

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

How well did you know this?

Not at all

Perfectly

converting an actionCreator into a closure is only necessary if

you need to make an async call before dispatching.

Note: You can dispatch before and after too.

How well did you know this?

Not at all

Perfectly

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

you need to make an async call before dispatching.

Note: You can dispatch before and after too.

How well did you know this?

Not at all

Perfectly

best redux tutorial, aside from calling mapDispatchToProps mapActionsToProps, is

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

and potentially for saying bindActionCreators is necessary

use this for the redux chrome dev tools

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

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

componentDidMount

to make initial api request for data, use

componentDidMount

a thunk action can

dispatch an actionCreator from above it in the actions file.

need to learn the proptype shortcuts

rpt

pta
ptb
ptr
ptn
pto
pts

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

The proptype shortcuts are

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

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

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

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

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

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

to install redux, type

npm install redux react-redux redux-thunk --save

make sure to export

the constants in types.js

the two ways to write mapDispatchToProps are

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

react: The attributes input fields should have are

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

the redux workflow is

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.

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

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.

components are named in

CapitalCase

To create a basic component, type

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;

components file extension is

.js

To import a custom component, type

import ComponentName from './components/ComponentName.js' -ComponentName />

To make a fetch request of just JSON, type

``` 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 }) }) ```

The three ways render components on a condition are

{ x > 10 andand -ComponentName /> } { false || -ComponentName /> } { x > 10 ? -ComponentName /> : -ComponentName2 /> }

function creation workflow

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.

the json rules are

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

an action creator is just a function that return an object

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

A context is essentially

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

To make a functional component only render once, tyoe

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