react-redux props in container are not updated when state chage occur

I am new to react redux, and trying to make frineds search function with mock-api call(https://github.com/DerekCuevas/friend-list/blob/master/redux-saga-solution/api/index.js).

In this project, I am just getting stuck with props are not updated when redux-state update. When the fetch action dispatch, states is updated well. I can see successfully states update by redux dev tool, but there's just error "" at container even though I connect the container component with redux store by connect method. I appreciate if you guys have some idea to make updating props to container well. here is my code. https://github.com/gakuakachi/friends-list

containers/Main/index.js

const mapStateToProps = state => {
  const { isFetching, friends, error } = state.friends;
  return {
    isFetching,
    friends,
    error
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchFriendsStart: friends => {
      dispatch(Actions.fetchFriendsStart(friends))
    }
  }
}

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

containers/Main/reducer.js

import { combineReducers } from 'redux'
import * as ActionType from './constants';
import { fromJS } from 'immutable';
/*
 *
 * Main reducer
 *
 */

const initialState = fromJS({
  isFetching: false,
  query: '',
  friends: [],
  error: ''
});

export default function friendsReducer( state = initialState, action) {
  switch (action.type) {
    case ActionType.FRIENDS_FETCH_START:
      return state.set('isFetching', false);
    case ActionType.FRIENDS_FETCH_SUCCESSED:
      return state.merge({
        isFetching: false,
        friends: action.friends
      });
    case ActionType.FRIENDS_FETCH_FAILED:
      return state.merge({
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}

containers/Main/sagas.js

import { fork, call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import * as Actions from './actions';
import * as ActionTypes from './constants';

import search from './service/api';

function* helloSaga() {
  console.log('Hello Sagas!');
}

function* fetchFriendsSaga(action) {
  try {
    // console.log("this is withing fetchFriendsSaga" + "   "+ action.param)
    const friends = yield call(search, action.param);
    yield put({type: ActionTypes.FRIENDS_FETCH_SUCCESSED, friends: friends });
  }catch(e) {
    yield put({type: ActionTypes.FRIENDS_FETCH_FAILED, error: e.message});
  }
}

function* fetchFriendsWatherSaga() {
  yield takeEvery(ActionTypes.FRIENDS_FETCH_START, fetchFriendsSaga);
}

function* rootSaga() {
  yield [
    fork(helloSaga),
    fork(fetchFriendsWatherSaga)
  ];
}

export default rootSaga;

containers/Main/actions.js

import fetch from 'isomorphic-fetch'
import { Api } from './service/api';
import * as ActionType from './constants';

export function fetchFriendsStart(param) {
  return {
    type: ActionType.FRIENDS_FETCH_START,
    param
  }
}


export const receiveFriends = friends => {
  return {
    type: ActionType.FRIENDS_FETCH_SUCCESSED,
    friends
  }
}

export const friendsFetchFailed = error => {
  return {
    type: ActionType.FRIENDS_FETCH_FAILED,
    error
  }
}