christiannaths

Component Structure

Option: pre-render articles via server-side page load & pass them directly into component via props. You'd still need to wait for the JS bundle to load before users would see the list, but it would cut out an extra round-trip to your server

render(
  <ArticleFeed articles={articlesArrayProvidedFromPageLoad} />,
  document.getElementById('#article-feed-root')
);

christiannaths

/**
 * Option: pre-render articles via server-side page load & pass
 * them directly into component via props.
 * 
 *    render(
 *      <ArticleFeed articles={articlesArrayProvidedFromPageLoad} />
 *    );
 * 
 * otherwise use XHR request in <ArticleFeed /> component's
 * "componentDidMount" lifecycle function. This function's

christiannaths

import React from 'react'
import { connect } from 'react-redux'
import { actions } from '../store/actions'

const mapStateToProps = (state) => ({
  notificationsState: state.settings.notifications ? 'on' : 'off'
})

const NotificationsSelect = ({notificationsState}) => (
  <div>

christiannaths

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import NotificationsSwitch from './components/notifications-switch'
import UserSettings from './components/user-settings'

class App extends Component {
  render () {
    return (
      <div className='App'>

christiannaths

import React from 'react'
import { connect } from 'react-redux'
import { actions } from '../store/actions'

const mapStateToProps = (state) => ({
  notifications: state.settings.notifications
})

const NotificationsSelect = ({notifications, dispatch}) => (
  <label>

christiannaths

import React from 'react'
import { connect } from 'react-redux'
import { actions } from '../store/actions'

const mapStateToProps = (state) => ({
  notifications: state.settings.notifications
})

const NotificationsSwitch = ({notifications, dispatch}) => (
  <label>

christiannaths

export const TYPES = {
  SET_NOTIFICATIONS: 'SET_NOTIFICATIONS'
}

export const actions = {
  setNotifications: (bool) => ({ type: TYPES.SET_NOTIFICATIONS, bool })
}

christiannaths

import { TYPES } from './actions'

const initialStates = {
  settings: {
    notifications: true
  }
}

export const settings = (state = initialStates.settings, action) => {
  switch (action.type) {

christiannaths

import { createStore, combineReducers } from 'redux'
import { settings } from './reducers'

const rootReducer = combineReducers({
  settings
})

export default createStore(rootReducer)

christiannaths

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />