Skip to content

Instantly share code, notes, and snippets.

View jepras's full-sized avatar

jepras

2 followers · 0 following
View GitHub Profile
@jepras
jepras / Random quote machine
Last active October 24, 2018 20:30
return (
<ul>
{items.map(item => (
<li key={item.ID}>
{item.title}
{item.content}
</li>
))}
</ul>
);
@jepras
jepras / gist:80b06435b56299a6820c4aa5986e0872
Created October 21, 2018 08:16
mapStateToProps & mapDispatchToProps injects redux into the component to use. In Presentional, submitMessage dispatches Redux function submitNewMessage with local React state input. This is then rendered with this.props.messages as messages is the state in Redux.
// Awesome sandbox: https://codesandbox.io/s/13on9ykl1l
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message: message
}
@jepras
jepras / Map dispatch to props
Created October 21, 2018 07:39
mapDispatchToProps takes the dispatch function as a parameter and then returns that function with the property of the addMessage action creator
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
// change code below this line
const mapDispatchToProps = dispatch => {
return {
@jepras
jepras / React and Redux: Use Provider to Connect Redux to React
Created October 19, 2018 12:34
React & Redux basic connected
// Redux Code:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
@jepras
jepras / React and Redux: Extract State Logic to Redux
Created October 19, 2018 12:28
Basic Redux setup with store, actionCreator & reducer that adds to immutable array
// define ADD, addMessage(), messageReducer(), and store here:
const ADD = 'ADD';
const messageReducer = (state = [], action) => {
switch(action.type) {
case ADD:
return [
...state,
action.message
]
@jepras
jepras / React and Redux: Manage State Locally First
Created October 18, 2018 12:15
Basic setup for inputting a value and rendering it as a list.
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
@jepras
jepras / Redux: Copy an Object with Object.assign
Created October 17, 2018 17:50
Use Object.assign to take in an empty object to create shallow copy, then take in state as parameter and update one of the parameters within.
const defaultState = {
user: 'CamperBot',
status: 'offline',
friends: '732,982',
community: 'freeCodeCamp'
};
const immutableReducer = (state = defaultState, action) => {
switch(action.type) {
case 'ONLINE':
@jepras
jepras / Redux: Remove an Item from an Array
Created October 17, 2018 17:44
Use spread operator. Start to slice from beginning until index, then add a slice starting from index + 1 until end.
const immutableReducer = (state = [0,1,2,3,4,5], action) => {
switch(action.type) {
case 'REMOVE_ITEM':
// don't mutate state here or the tests will fail
return [
...state.slice(0, action.index),
...state.slice(action.index + 1, state.length)
]
default:
return state;
@jepras
jepras / Write a counter with Redux
Created October 17, 2018 17:22
First, set action types to string. Then create action creators with type. Type is used in the reducer to decide case & what to return. Lastly add reducer to store.
const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types
const counterReducer = (state = 0, action) => {
switch(action.type) {
case INCREMENT:
return state + 1
case DECREMENT:
return state - 1
default:
@jepras
jepras / Use Middleware to handle Asynchronous functions
Created October 17, 2018 16:51
Create action dispatchers requestingData & received data. These feed into the handleAsync asynchronous function that first dispatches the first, and after 2,5 dispatches the second. Also added Redux.applyMiddleware(ReduxThunk.default) as second parameter to store variable
const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'
const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }
const handleAsync = () => {
return function(dispatch) {
// dispatch request action here
dispatch(requestingData());