gistfile1.txt

  'CS47SI: 01. Initial State':
    'prefix': 'std_initial_state'
    'body': """
      const initialStoreState = {
        todos: [
          { id: 1, title: 'Build TODO app in under 1 hour', done: false },
          { id: 2, title: 'Prepare slides', done: false },
          { id: 3, title: 'Eat some cake', done: true },
        ],
      };
    """

  'CS47SI: 02. Create store and Provider':
    'prefix': 'std_create_store'
    'body': """
      import { createStore } from 'redux';
      import { Provider } from 'react-redux';
      import { reducer } from './App/Store/Reducer';

      const store = createStore(reducer, initialStoreState);

      export default class App extends React.Component {
        render() {
          return (
            <Provider store={store}>
              <TodoScreen />
            </Provider>
          );
        }
      }
    """


  'CS47SI: 03.1. Map TODOs state to props':
    'prefix': 'std_connect'
    'body': """
      import { connect } from 'react-redux';

      @connect()
    """

  'CS47SI: 03.2. Map TODOs state to props':
    'prefix': 'std_map_state'
    'body': """
      function mapStateToProps(storeState) {
        return {
          todos: storeState.todos,
        };
      }
    """

  'CS47SI: 03.3. Map TODOs state to summary props':
    'prefix': 'std_map_state_count'
    'body': """
      function mapStateToProps(storeState) {
        return {
          completedCount: storeState.todos.filter(todo => todo.done).length,
        };
      }
    """


  'CS47SI: 04. Map toggle dispatch to props':
    'prefix': 'std_map_toggle_dispatch'
    'body': """
      function mapDispatchToProps(dispatch, props) {
        return {
          onToggle: () => dispatch({type: 'TOGGLE_TODO'}),
        };
      }
    """

  'CS47SI: 05. Toggle TODO reducer':
    'prefix': 'std_toggle'
    'body': """
      if (action.type === 'TOGGLE_TODO') {
        const updatedTodos = state.todos.map(
          todo => todo.id === action.id
            ? {...todo, done: !todo.done}
            : todo
        );
        return {
          todos: updatedTodos,
        };
      }
    """


  'CS47SI: 05.ALT. Toggle TODO reducer':
    'prefix': 'std_toggle_alt'
    'body': """
      if (action.type === 'TOGGLE_TODO') {
        const updatedTodos = [];
        for (let todo of state.todos) {
          if (todo.id === action.id) {
            updatedTodos.push({
              id: todo.id,
              title: todo.title,
              done: !todo.done,
            });
          } else {
            updatedTodos.push(todo);
          }
        }
        return {
          todos: updatedTodos,
        };
      }
    """


  'CS47SI: 06. Map add dispatch to props':
    'prefix': 'std_map_add_dispatch'
    'body': """
      function mapDispatchToProps(dispatch, props) {
        return {
          onAdd: (title) => dispatch(addTodo(title)),
        };
      }
    """

  'CS47SI: 07. Add TODO reducer':
    'prefix': 'std_add'
    'body': """
      if (action.type === ADD_TODO) {
        return {
          todos: [
            { id: action.id, title: action.title, done: false },
            ...state.todos,
          ],
        }
      }
    """

  'CS47SI: 08. Save and load state':
    'prefix': 'std_persist'
    'body': """
      // Primitive version of redux-persist
      AsyncStorage.getItem('state').then(json => {
        if (json) {
          store.dispatch(restoreState(JSON.parse(json)));
        }
        store.subscribe(() => {
          AsyncStorage.setItem('state', JSON.stringify(store.getState()));
        })
      });
    """

  'CS47SI: 09. Restore State':
    'prefix': 'std_restore'
    'body': """
      if (action.type === RESTORE_STATE) {
        return action.state;
      }
    """

  'CS47SI: 10. DevTools':
    'prefix': 'std_devtools'
    'body': """
      import devtools from 'remote-redux-devtools';

      const store = createStore(reducer, initialStoreState, devtools({port: 8000}));
    """