Enterprise Framework

Adding New State Property setting constants, actions, selectors, reducer, index

• Container/Dashboard/constants.js

• // Add constant for CHANGE_TAB
  export const CHANGE_TAB = 'boilerplate/Dashboard/CHANGE_TAB';

• Container/Dashboard/actions.js

• import { CHANGE_TAB } from './constants';
  
  /**
   * Changes the selected tab of the dashboard
   *
   * @param  {selectedTab} name The new text of the input field
   *
   * @return {object}    An action object with a type of CHANGE_SENSOR
   */
  export function changeTab(selectedTab) {
    const action = {
      type: CHANGE_TAB,
      selectedTab,
    };
    console.log(`changeTab(${selectedTab})`, action);
    return action;
  }
  

• Container/Dashboard/selectors.js

• // Create a selector that will get selectedTab from State
  const makeSelectSelectedTab = () =>
    createSelector(selectDashboard, dashboardState => 
  dashboardState.get('selectedTab'));
  
  // Add makeSelectSelectedTab to export
  export { makeSelectSelectedTab };
  

• Container/Dashboard/reducer.js

• import { CHANGE_TAB } from './constants';
  
  // The initial state of the App
  export const initialState = fromJS({
    selectedTab: 0
  });
  
  // Add CHANGE_TAB to reducer
  function dashboardReducer(state = initialState, action) {
    switch (action.type) {
      case CHANGE_TAB:
        // Set selected tab
        return state.set('selectedTab', action.selectedTab);
      default:
       return state;
    }
  }
  
  

• Container/Dashboard/index.js

• import { changeTab } from './actions';
  import { makeSelectSelectedTab } from './selectors';
  
  class Dashboard extends React.PureComponent {
    handleTabChange = (e, f) => {
      this.props.onChangeTab(f); 
    }
    render() {
      return (
        <div>hello</div>
      );
    }
  }
  
  // Add selectedTab, and onChangeTab to propTypes
  DashboardPage.propTypes = {
    loading: PropTypes.bool,
    error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
    repos: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
    onSubmitForm: PropTypes.func,
    selectedTab: PropTypes.number,
    onChangeTab: PropTypes.func,
  };
   
  // Add onChangeTab method to props, it will be dispatch on calling.
  export function mapDispatchToProps(dispatch) {
    return {
      onChangeTab: selectedTab => {
        console.log(`onChangeTab(${selectedTab})`);
        dispatch(changeTab(selectedTab));
      }
    };
  }
  
  // Add selectedTab to props.  It retrieves from selector from state
  const mapStateToProps = (state, ownProps) => {
    return createStructuredSelector({
        selectedTab: makeSelectSelectedTab(),
        loading: makeSelectLoading(),
        error: makeSelectError(),
      }
    );
  };
   
  

• Save and review