Instantly share code, notes, and snippets.

View Random quote machine
return (
<ul>
{items.map(item => (
<li key={item.ID}>
{item.title}
{item.content}
</li>
))}
</ul>
);
@jepras
jepras / gist:80b06435b56299a6820c4aa5986e0872
Created Oct 21, 2018
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.
View gist:80b06435b56299a6820c4aa5986e0872
// 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 Oct 21, 2018
mapDispatchToProps takes the dispatch function as a parameter and then returns that function with the property of the addMessage action creator
View Map dispatch to props
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
// change code below this line
const mapDispatchToProps = dispatch => {
return {
View React and Redux: Use Provider to Connect Redux to React
// Redux Code:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
@jepras
jepras / React and Redux: Extract State Logic to Redux
Created Oct 19, 2018
Basic Redux setup with store, actionCreator & reducer that adds to immutable array
View React and Redux: Extract State Logic to Redux
// 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 Oct 18, 2018
Basic setup for inputting a value and rendering it as a list.
View React and Redux: Manage State Locally First
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 Oct 17, 2018
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.
View Redux: Copy an Object with Object.assign
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 Oct 17, 2018
Use spread operator. Start to slice from beginning until index, then add a slice starting from index + 1 until end.
View Redux: Remove an Item from an Array
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 Oct 17, 2018
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.
View Write a counter with Redux
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 Oct 17, 2018
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
View Use Middleware to handle Asynchronous functions
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());