redux_mentor_fetching.tsx

// app.tsx

import React, { Component } from 'react';
import { Provider } from 'react-redux';
// import Environment from 'app/components/environment';
import AppHeaderLayout from 'app/scenes/app-header-layout';
import DashboardScene from 'app/scenes/dashboard-scene';
import 'assets/styles/shared.scss';
import store from './store';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppHeaderLayout>
          <DashboardScene />
        </AppHeaderLayout>
      </Provider>
    );
  }
}

export default App;


// dashboard-scene.tsx

import React from 'react';
import { connect } from 'react-redux';
import { actions } from 'app/models/mentors/mentors-actions';
// import { IMentors } from 'app/models/mentors/mentors-types'
import styles from './dashboard-scene.module.scss';

interface IProps {
  getMentors: () => any;
  mentors: any;
}

const mapStateToProps = (state) => ({
  mentors: state.mentors
});

const mapDispatchToProps = {
  getMentors: actions.getMentors
};

export class DashboardScene extends React.Component<IProps> {
  async componentDidMount() {
    this.props.getMentors();
  }

  render() {
    const mentors = this.props.mentors || [];
    return (
      <div className={styles.dashboardLayout}>
        <ul>
          {mentors.map((mentor) => {
            return (
              <li key={mentor.uid}>
                {mentor.uid} | {mentor.paypal_email}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DashboardScene);


// mentors-actions.ts

import {
  createAction,
  createActionType
} from 'app/models/helpers/action-helper';

export const actionClass = 'MENTORS';

export const actionTypes: any = {
  ...createActionType('FETCH', actionClass)
};

export const actions = {
  getMentors() {
    return createAction(actionTypes.FETCH_START);
  }
};


// mentors-reducer.ts

import Immutable from 'seamless-immutable';
import { IMentors } from './mentors-types';
import { IAction } from 'app/models/helpers/redux-types';
import { actionTypes } from './mentors-actions';

export const initialState: IMentors = Immutable.from([]);

export default function reducer(
  state: IMentors = initialState,
  action: IAction
) {
  const { type, payload } = action;

  switch (type) {
    case actionTypes.FETCH_FULFILLED: {
      return Immutable.from(payload.mentors);
    }
  }

  return state;
}


// mentors-sagas.ts

import { call, put, takeLatest, all } from 'redux-saga/effects';
import * as requests from './mentors-external-requests';
import { actionTypes } from './mentors-actions';
import { makeSagaLifecycle } from 'app/models/helpers/saga-helper';

// TODO add normalize
// type safe

interface IGetMentorAction {
  payload?: any;
}

export function* getMentors(action: IGetMentorAction) {
  const mentors = yield call(requests.getMentors);
  // TODO normalize

  yield put({
    type: actionTypes.FETCH_FULFILLED,
    payload: mentors
  });
}

export function* watchGetMentors() {
  yield takeLatest(
    actionTypes.FETCH_START,
    makeSagaLifecycle(getMentors, 'FETCH', actionTypes)
  );
}

export default function* moduleRoot() {
  yield all([watchGetMentors()]);
}


// root-reducer.ts

import { combineReducers } from 'redux-seamless-immutable';
import mentors from 'app/models/mentors/mentors-reducer';

export default combineReducers({
  mentors
});