Skip to content

Instantly share code, notes, and snippets.

@BilalBudhani
Created June 20, 2018 08:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BilalBudhani/8386fb8047229fb0eb38fa0ba40b2311 to your computer and use it in GitHub Desktop.
Save BilalBudhani/8386fb8047229fb0eb38fa0ba40b2311 to your computer and use it in GitHub Desktop.
React Session Notes
const initialState = {
mute: true,
inProgress: true,
...///
}
const initialState = {
controls: {
mute: true,
},
notes: {
message:
category:
}
}
function handleControls(state, action) {
switch(action.payload) {
case
}
}
function(state = initialState, action) {
switch(action.payload) {
case CONTROL_MUTED: {
return {
...state,
...handleControls({...state, action.payload}, action)
}
}
}
}
const { controls, notes } = this.props;
<Dailer>
<Controls {...controls}>
</Controls>
<Notes {...notes}>
</Notes>
</Dailer>
------
1. Move redux related code into its own directory
2. Keep Reducers in their respective logical components
-------
class Container
componentDidMount()
this.props.connectChannel()
render() {
const { ...} = this.props
}
------ Actions
connectChannel() {
const socket = new Socket(notification_socket_endpoint);
socket.connect();
const channel = socket.channel(`dialer_status_notification/${current_user_id}`, {});
channel.join();
channel.on("dialer_status_update", (data) => {
return {
action: WIDGET_NOTIFICATION_CHANGED,
payload: data.call_status
}
}
}
----- Reducer
case WIDGET_NOTIFICATION_CHANGED: {
if (payload === busy) {
return {
...state,
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment