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

Question

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
}
}