Re-organizing components to be more modular, adding loading bars

This commit is contained in:
Eugen Rochko 2016-09-19 23:25:59 +02:00
parent f820edb463
commit 337462aa5e
31 changed files with 155 additions and 126 deletions

View File

@ -6,4 +6,4 @@ window.ReactDOM = require('react-dom');
//= require_tree ./components //= require_tree ./components
window.Root = require('./components/containers/root'); window.Mastodon = require('./components/containers/mastodon');

View File

@ -1,50 +0,0 @@
import ColumnsArea from './columns_area';
import Column from './column';
import Drawer from './drawer';
import ComposeFormContainer from '../containers/compose_form_container';
import FollowFormContainer from '../containers/follow_form_container';
import UploadFormContainer from '../containers/upload_form_container';
import StatusListContainer from '../containers/status_list_container';
import NotificationsContainer from '../containers/notifications_container';
import NavigationContainer from '../containers/navigation_container';
import PureRenderMixin from 'react-addons-pure-render-mixin';
const Frontend = React.createClass({
mixins: [PureRenderMixin],
render () {
return (
<div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
<Drawer>
<div style={{ flex: '1 1 auto' }}>
<NavigationContainer />
<ComposeFormContainer />
<UploadFormContainer />
</div>
<FollowFormContainer />
</Drawer>
<ColumnsArea>
<Column icon='home' heading='Home'>
<StatusListContainer type='home' />
</Column>
<Column icon='at' heading='Mentions'>
<StatusListContainer type='mentions' />
</Column>
<Column>
{this.props.children}
</Column>
</ColumnsArea>
<NotificationsContainer />
</div>
);
}
});
export default Frontend;

View File

@ -1,6 +1,5 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import configureStore from '../store/configureStore'; import configureStore from '../store/configureStore';
import Frontend from '../components/frontend';
import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines'; import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines';
import { setAccessToken } from '../actions/meta'; import { setAccessToken } from '../actions/meta';
import { setAccountSelf } from '../actions/accounts'; import { setAccountSelf } from '../actions/accounts';
@ -10,10 +9,11 @@ import Account fro
import Settings from '../features/settings'; import Settings from '../features/settings';
import Status from '../features/status'; import Status from '../features/status';
import Subscriptions from '../features/subscriptions'; import Subscriptions from '../features/subscriptions';
import UI from '../features/ui';
const store = configureStore(); const store = configureStore();
const Root = React.createClass({ const Mastodon = React.createClass({
propTypes: { propTypes: {
token: React.PropTypes.string.isRequired, token: React.PropTypes.string.isRequired,
@ -58,7 +58,7 @@ const Root = React.createClass({
return ( return (
<Provider store={store}> <Provider store={store}>
<Router history={hashHistory}> <Router history={hashHistory}>
<Route path='/' component={Frontend}> <Route path='/' component={UI}>
<Route path='/settings' component={Settings} /> <Route path='/settings' component={Settings} />
<Route path='/subscriptions' component={Subscriptions} /> <Route path='/subscriptions' component={Subscriptions} />
<Route path='/statuses/:statusId' component={Status} /> <Route path='/statuses/:statusId' component={Status} />
@ -71,4 +71,4 @@ const Root = React.createClass({
}); });
export default Root; export default Mastodon;

View File

@ -31,12 +31,12 @@ const Status = React.createClass({
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
componentWillMount () { componentWillMount () {
this.props.dispatch(fetchStatus(this.props.params.statusId)); this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
}, },
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this.props.dispatch(fetchStatus(nextProps.params.statusId)); this.props.dispatch(fetchStatus(Number(nextProps.params.statusId)));
} }
}, },

View File

@ -1,5 +1,5 @@
import CharacterCounter from './character_counter'; import CharacterCounter from './character_counter';
import Button from './button'; import Button from '../../../components/button';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ReplyIndicator from './reply_indicator'; import ReplyIndicator from './reply_indicator';

View File

@ -1,4 +1,4 @@
import IconButton from './icon_button'; import IconButton from '../../../components/icon_button';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
const FollowForm = React.createClass({ const FollowForm = React.createClass({

View File

@ -1,8 +1,8 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Avatar from './avatar'; import Avatar from '../../../components/avatar';
import IconButton from './icon_button'; import IconButton from '../../../components/icon_button';
import DisplayName from './display_name'; import DisplayName from '../../../components/display_name';
import { Link } from 'react-router'; import { Link } from 'react-router';
const NavigationBar = React.createClass({ const NavigationBar = React.createClass({

View File

@ -1,8 +1,8 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Avatar from './avatar'; import Avatar from '../../../components/avatar';
import IconButton from './icon_button'; import IconButton from '../../../components/icon_button';
import DisplayName from './display_name'; import DisplayName from '../../../components/display_name';
const ReplyIndicator = React.createClass({ const ReplyIndicator = React.createClass({

View File

@ -1,5 +1,5 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import Button from './button'; import Button from '../../../components/button';
const UploadButton = React.createClass({ const UploadButton = React.createClass({

View File

@ -1,7 +1,7 @@
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import UploadButton from './upload_button'; import UploadButton from './upload_button';
import IconButton from './icon_button'; import IconButton from '../../../components/icon_button';
const UploadForm = React.createClass({ const UploadForm = React.createClass({

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ComposeForm from '../components/compose_form'; import ComposeForm from '../components/compose_form';
import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose'; import { changeCompose, submitCompose, cancelReplyCompose } from '../../../actions/compose';
function selectStatus(state) { function selectStatus(state) {
let statusId = state.getIn(['compose', 'in_reply_to'], null); let statusId = state.getIn(['compose', 'in_reply_to'], null);

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import FollowForm from '../components/follow_form'; import FollowForm from '../components/follow_form';
import { changeFollow, submitFollow } from '../actions/follow'; import { changeFollow, submitFollow } from '../../../actions/follow';
const mapStateToProps = function (state, props) { const mapStateToProps = function (state, props) {
return { return {

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { NotificationStack } from 'react-notification'; import { NotificationStack } from 'react-notification';
import { dismissNotification } from '../actions/notifications'; import { dismissNotification } from '../../../actions/notifications';
const mapStateToProps = (state, props) => { const mapStateToProps = (state, props) => {
return { return {

View File

@ -1,8 +1,8 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import StatusList from '../components/status_list'; import StatusList from '../../../components/status_list';
import { replyCompose } from '../actions/compose'; import { replyCompose } from '../../../actions/compose';
import { reblog, favourite } from '../actions/interactions'; import { reblog, favourite } from '../../../actions/interactions';
import { selectStatus } from '../reducers/timelines'; import { selectStatus } from '../../../reducers/timelines';
const mapStateToProps = function (state, props) { const mapStateToProps = function (state, props) {
return { return {

View File

@ -1,6 +1,6 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import UploadForm from '../components/upload_form'; import UploadForm from '../components/upload_form';
import { uploadCompose, undoUploadCompose } from '../actions/compose'; import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
const mapStateToProps = function (state, props) { const mapStateToProps = function (state, props) {
return { return {

View File

@ -0,0 +1,56 @@
import ColumnsArea from './components/columns_area';
import Column from './components/column';
import Drawer from './components/drawer';
import ComposeFormContainer from './containers/compose_form_container';
import FollowFormContainer from './containers/follow_form_container';
import UploadFormContainer from './containers/upload_form_container';
import StatusListContainer from './containers/status_list_container';
import NotificationsContainer from './containers/notifications_container';
import NavigationContainer from './containers/navigation_container';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import LoadingBar from 'react-redux-loading-bar';
const UI = React.createClass({
propTypes: {
router: React.PropTypes.object
},
mixins: [PureRenderMixin],
render () {
return (
<div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
<Drawer>
<div style={{ flex: '1 1 auto' }}>
<NavigationContainer />
<ComposeFormContainer />
<UploadFormContainer />
</div>
<FollowFormContainer />
</Drawer>
<ColumnsArea>
<Column icon='home' heading='Home'>
<StatusListContainer type='home' />
</Column>
<Column icon='at' heading='Mentions'>
<StatusListContainer type='mentions' />
</Column>
<Column>
{this.props.children}
</Column>
</ColumnsArea>
<NotificationsContainer />
<LoadingBar style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
</div>
);
}
});
export default UI;

View File

@ -1,4 +1,16 @@
import * as constants from '../actions/compose'; import {
COMPOSE_CHANGE,
COMPOSE_REPLY,
COMPOSE_REPLY_CANCEL,
COMPOSE_SUBMIT_REQUEST,
COMPOSE_SUBMIT_SUCCESS,
COMPOSE_SUBMIT_FAIL,
COMPOSE_UPLOAD_REQUEST,
COMPOSE_UPLOAD_SUCCESS,
COMPOSE_UPLOAD_FAIL,
COMPOSE_UPLOAD_UNDO,
COMPOSE_UPLOAD_PROGRESS
} from '../actions/compose';
import { TIMELINE_DELETE } from '../actions/timelines'; import { TIMELINE_DELETE } from '../actions/timelines';
import Immutable from 'immutable'; import Immutable from 'immutable';
@ -13,41 +25,41 @@ const initialState = Immutable.Map({
export default function compose(state = initialState, action) { export default function compose(state = initialState, action) {
switch(action.type) { switch(action.type) {
case constants.COMPOSE_CHANGE: case COMPOSE_CHANGE:
return state.set('text', action.text); return state.set('text', action.text);
case constants.COMPOSE_REPLY: case COMPOSE_REPLY:
return state.withMutations(map => { return state.withMutations(map => {
map.set('in_reply_to', action.status.get('id')); map.set('in_reply_to', action.status.get('id'));
map.set('text', `@${action.status.getIn(['account', 'acct'])} `); map.set('text', `@${action.status.getIn(['account', 'acct'])} `);
}); });
case constants.COMPOSE_REPLY_CANCEL: case COMPOSE_REPLY_CANCEL:
return state.withMutations(map => { return state.withMutations(map => {
map.set('in_reply_to', null); map.set('in_reply_to', null);
map.set('text', ''); map.set('text', '');
}); });
case constants.COMPOSE_SUBMIT_REQUEST: case COMPOSE_SUBMIT_REQUEST:
return state.set('is_submitting', true); return state.set('is_submitting', true);
case constants.COMPOSE_SUBMIT_SUCCESS: case COMPOSE_SUBMIT_SUCCESS:
return state.withMutations(map => { return state.withMutations(map => {
map.set('text', ''); map.set('text', '');
map.set('is_submitting', false); map.set('is_submitting', false);
map.set('in_reply_to', null); map.set('in_reply_to', null);
map.update('media_attachments', list => list.clear()); map.update('media_attachments', list => list.clear());
}); });
case constants.COMPOSE_SUBMIT_FAIL: case COMPOSE_SUBMIT_FAIL:
return state.set('is_submitting', false); return state.set('is_submitting', false);
case constants.COMPOSE_UPLOAD_REQUEST: case COMPOSE_UPLOAD_REQUEST:
return state.set('is_uploading', true); return state.set('is_uploading', true);
case constants.COMPOSE_UPLOAD_SUCCESS: case COMPOSE_UPLOAD_SUCCESS:
return state.withMutations(map => { return state.withMutations(map => {
map.update('media_attachments', list => list.push(Immutable.fromJS(action.media))); map.update('media_attachments', list => list.push(Immutable.fromJS(action.media)));
map.set('is_uploading', false); map.set('is_uploading', false);
}); });
case constants.COMPOSE_UPLOAD_FAIL: case COMPOSE_UPLOAD_FAIL:
return state.set('is_uploading', false); return state.set('is_uploading', false);
case constants.COMPOSE_UPLOAD_UNDO: case COMPOSE_UPLOAD_UNDO:
return state.update('media_attachments', list => list.filterNot(item => item.get('id') === action.media_id)); return state.update('media_attachments', list => list.filterNot(item => item.get('id') === action.media_id));
case constants.COMPOSE_UPLOAD_PROGRESS: case COMPOSE_UPLOAD_PROGRESS:
return state.set('progress', Math.round((action.loaded / action.total) * 100)); return state.set('progress', Math.round((action.loaded / action.total) * 100));
case TIMELINE_DELETE: case TIMELINE_DELETE:
if (action.id === state.get('in_reply_to')) { if (action.id === state.get('in_reply_to')) {

View File

@ -1,4 +1,9 @@
import * as constants from '../actions/follow'; import {
FOLLOW_CHANGE,
FOLLOW_SUBMIT_REQUEST,
FOLLOW_SUBMIT_SUCCESS,
FOLLOW_SUBMIT_FAIL
} from '../actions/follow';
import Immutable from 'immutable'; import Immutable from 'immutable';
const initialState = Immutable.Map({ const initialState = Immutable.Map({
@ -6,17 +11,17 @@ const initialState = Immutable.Map({
is_submitting: false is_submitting: false
}); });
export default function compose(state = initialState, action) { export default function follow(state = initialState, action) {
switch(action.type) { switch(action.type) {
case constants.FOLLOW_CHANGE: case FOLLOW_CHANGE:
return state.set('text', action.text); return state.set('text', action.text);
case constants.FOLLOW_SUBMIT_REQUEST: case FOLLOW_SUBMIT_REQUEST:
return state.set('is_submitting', true); return state.set('is_submitting', true);
case constants.FOLLOW_SUBMIT_SUCCESS: case FOLLOW_SUBMIT_SUCCESS:
return state.withMutations(map => { return state.withMutations(map => {
map.set('text', '').set('is_submitting', false); map.set('text', '').set('is_submitting', false);
}); });
case constants.FOLLOW_SUBMIT_FAIL: case FOLLOW_SUBMIT_FAIL:
return state.set('is_submitting', false); return state.set('is_submitting', false);
default: default:
return state; return state;

View File

@ -4,11 +4,13 @@ import meta from './meta';
import compose from './compose'; import compose from './compose';
import follow from './follow'; import follow from './follow';
import notifications from './notifications'; import notifications from './notifications';
import { loadingBarReducer } from 'react-redux-loading-bar';
export default combineReducers({ export default combineReducers({
timelines, timelines,
meta, meta,
compose, compose,
follow, follow,
notifications notifications,
loadingBar: loadingBarReducer,
}); });

View File

@ -24,7 +24,7 @@ function notificationFromError(state, error) {
return state.push(n); return state.push(n);
}; };
export default function meta(state = initialState, action) { export default function notifications(state = initialState, action) {
switch(action.type) { switch(action.type) {
case COMPOSE_SUBMIT_FAIL: case COMPOSE_SUBMIT_FAIL:
case COMPOSE_UPLOAD_FAIL: case COMPOSE_UPLOAD_FAIL:

View File

@ -45,7 +45,7 @@ export function selectStatus(state, id) {
return status; return status;
}; };
function statusToMaps(state, status) { function normalizeStatus(state, status) {
// Separate account // Separate account
let account = status.get('account'); let account = status.get('account');
status = status.set('account', account.get('id')); status = status.set('account', account.get('id'));
@ -55,7 +55,7 @@ function statusToMaps(state, status) {
if (reblog !== null) { if (reblog !== null) {
status = status.set('reblog', reblog.get('id')); status = status.set('reblog', reblog.get('id'));
state = statusToMaps(state, reblog); state = normalizeStatus(state, reblog);
} }
// Replies // Replies
@ -80,26 +80,26 @@ function statusToMaps(state, status) {
}); });
}; };
function timelineToMaps(state, timeline, statuses) { function normalizeTimeline(state, timeline, statuses) {
statuses.forEach((status, i) => { statuses.forEach((status, i) => {
state = statusToMaps(state, status); state = normalizeStatus(state, status);
state = state.setIn([timeline, i], status.get('id')); state = state.setIn([timeline, i], status.get('id'));
}); });
return state; return state;
}; };
function accountTimelineToMaps(state, accountId, statuses) { function normalizeAccountTimeline(state, accountId, statuses) {
statuses.forEach((status, i) => { statuses.forEach((status, i) => {
state = statusToMaps(state, status); state = normalizeStatus(state, status);
state = state.updateIn(['accounts_timelines', accountId], Immutable.List(), list => list.set(i, status.get('id'))); state = state.updateIn(['accounts_timelines', accountId], Immutable.List(), list => list.set(i, status.get('id')));
}); });
return state; return state;
}; };
function updateTimelineWithMaps(state, timeline, status) { function updateTimeline(state, timeline, status) {
state = statusToMaps(state, status); state = normalizeStatus(state, status);
state = state.update(timeline, list => list.unshift(status.get('id'))); state = state.update(timeline, list => list.unshift(status.get('id')));
state = state.updateIn(['accounts_timelines', status.getIn(['account', 'id'])], Immutable.List(), list => list.unshift(status.get('id'))); state = state.updateIn(['accounts_timelines', status.getIn(['account', 'id'])], Immutable.List(), list => list.unshift(status.get('id')));
@ -114,20 +114,20 @@ function deleteStatus(state, id) {
return state.deleteIn(['statuses', id]); return state.deleteIn(['statuses', id]);
}; };
function accountToMaps(state, account) { function normalizeAccount(state, account) {
return state.setIn(['accounts', account.get('id')], account); return state.setIn(['accounts', account.get('id')], account);
}; };
function contextToMaps(state, status, ancestors, descendants) { function normalizeContext(state, status, ancestors, descendants) {
state = statusToMaps(state, status); state = normalizeStatus(state, status);
let ancestorsIds = ancestors.map(ancestor => { let ancestorsIds = ancestors.map(ancestor => {
state = statusToMaps(state, ancestor); state = normalizeStatus(state, ancestor);
return ancestor.get('id'); return ancestor.get('id');
}).toOrderedSet(); }).toOrderedSet();
let descendantsIds = descendants.map(descendant => { let descendantsIds = descendants.map(descendant => {
state = statusToMaps(state, descendant); state = normalizeStatus(state, descendant);
return descendant.get('id'); return descendant.get('id');
}).toOrderedSet(); }).toOrderedSet();
@ -140,14 +140,14 @@ function contextToMaps(state, status, ancestors, descendants) {
export default function timelines(state = initialState, action) { export default function timelines(state = initialState, action) {
switch(action.type) { switch(action.type) {
case TIMELINE_SET: case TIMELINE_SET:
return timelineToMaps(state, action.timeline, Immutable.fromJS(action.statuses)); return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses));
case TIMELINE_UPDATE: case TIMELINE_UPDATE:
return updateTimelineWithMaps(state, action.timeline, Immutable.fromJS(action.status)); return updateTimeline(state, action.timeline, Immutable.fromJS(action.status));
case TIMELINE_DELETE: case TIMELINE_DELETE:
return deleteStatus(state, action.id); return deleteStatus(state, action.id);
case REBLOG_SUCCESS: case REBLOG_SUCCESS:
case FAVOURITE_SUCCESS: case FAVOURITE_SUCCESS:
return statusToMaps(state, Immutable.fromJS(action.response)); return normalizeStatus(state, Immutable.fromJS(action.response));
case ACCOUNT_SET_SELF: case ACCOUNT_SET_SELF:
return state.withMutations(map => { return state.withMutations(map => {
map.setIn(['accounts', action.account.id], Immutable.fromJS(action.account)); map.setIn(['accounts', action.account.id], Immutable.fromJS(action.account));
@ -157,11 +157,11 @@ export default function timelines(state = initialState, action) {
case FOLLOW_SUBMIT_SUCCESS: case FOLLOW_SUBMIT_SUCCESS:
case ACCOUNT_FOLLOW_SUCCESS: case ACCOUNT_FOLLOW_SUCCESS:
case ACCOUNT_UNFOLLOW_SUCCESS: case ACCOUNT_UNFOLLOW_SUCCESS:
return accountToMaps(state, Immutable.fromJS(action.account)); return normalizeAccount(state, Immutable.fromJS(action.account));
case STATUS_FETCH_SUCCESS: case STATUS_FETCH_SUCCESS:
return contextToMaps(state, Immutable.fromJS(action.status), Immutable.fromJS(action.context.ancestors), Immutable.fromJS(action.context.descendants)); return normalizeContext(state, Immutable.fromJS(action.status), Immutable.fromJS(action.context.ancestors), Immutable.fromJS(action.context.descendants));
case ACCOUNT_TIMELINE_FETCH_SUCCESS: case ACCOUNT_TIMELINE_FETCH_SUCCESS:
return accountTimelineToMaps(state, action.id, Immutable.fromJS(action.statuses)); return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses));
default: default:
return state; return state;
} }

View File

@ -1,7 +1,10 @@
import { createStore, applyMiddleware, compose } from 'redux'; import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import appReducer from '../reducers'; import appReducer from '../reducers';
import { loadingBarMiddleware } from 'react-redux-loading-bar';
export default function configureStore(initialState) { export default function configureStore(initialState) {
return createStore(appReducer, initialState, compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f)); return createStore(appReducer, initialState, compose(applyMiddleware(thunk, loadingBarMiddleware({
} promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
})), window.devToolsExtension ? window.devToolsExtension() : f => f));
};

View File

@ -1 +1 @@
= react_component 'Root', default_props, class: 'app-holder', prerender: false = react_component 'Mastodon', default_props, class: 'app-holder', prerender: false

View File

@ -21,6 +21,7 @@
"react-immutable-proptypes": "^2.1.0", "react-immutable-proptypes": "^2.1.0",
"react-notification": "^6.1.1", "react-notification": "^6.1.1",
"react-redux": "^4.4.5", "react-redux": "^4.4.5",
"react-redux-loading-bar": "^2.3.3",
"react-router": "^2.8.0", "react-router": "^2.8.0",
"redux": "^3.5.2", "redux": "^3.5.2",
"redux-immutable": "^3.0.8", "redux-immutable": "^3.0.8",