rdx Flashcards
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
}
}
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/
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.
promises are necessary when you are
relying on the return value of a function
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.
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"
}
}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
the get and set keywords do work in
object literals, as well as constructor functions and classes.
To create a getter function that can be called without using (), type
{
get funcName() {
return "string"
}
}To generate a class based component with all lifecycle methods in vscode, type
rcfc tab
To generate a functional component in vscode, type
rscp
Only if you do not set mapDispatchToProps, you can use
this.props.dispatch({type: ‘INCREMENT’})
redux automatically adds
as this.props.dispatch() in your component if you do not set mapDispatchToProps()
an action is
an object with type and payload
{type : “ADD_TODO”, payload : “string”}
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.
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.
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 />
);
})
