import * as userQueryAction from '../actions/user-query' ; import { UserQuery } from '../models' ; prop export interface State { query : UserQuery ; } /**
 * Initial Query state which is passed onto the store.
 */ const queryInitialState = { screen_name : '' } ; prop prop export const initialState = { query : queryInitialState , } ; /**
 * The actual reducer function. Reducers can be thought of as the tables in the DataBase.
 * These are the functions which are responsible for maintaing, and updating the
 * `State` of the application they control.
 *
 * Here the reducer cotrols that part of the state which is shows the state of the application
 * wheather it is searching and what is it searching for.
 */ export function reducer ( state = initialState , action ) { switch ( action . type ) { case userQueryAction . ActionTypes . VALUE_CHANGE : { const screen_name = action . payload ; return Object . assign ( { } , state , { query : { ... state . query , screen_name } } ) ; } default : { return state ; } } } /**
 * Because the data structure is defined within the reducer it is optimal to
 * locate our selector functions at this level. If store is to be thought of
 * as a database, and reducers the tables, selectors can be considered the
 * queries into said database. Remember to keep your selectors small and
 * focused so they can be combined and composed to fit each particular
 * use-case.
 */ export const getQuery = ( state ) => state . query ; export const getQueryScreenName = ( state ) => state . query . screen_name ;