actions\index.js

export const moviesLoaded = movies => ({
  type: 'MOVIES-LOADED',
  payload: movies,
});

export const loadMovies = () => dispatch =>
  fetch('/movies.json')
    .then(rsp => rsp.json())
    .then(movies => dispatch(moviesLoaded(movies)));

export const login = user => (dispatch) => {
  dispatch({
    type: 'LOGIN',
    payload: user,
  });
  dispatch(loadMovies());
};

app-container.jsx

import React, { Component } from 'react';
import AppPresentation from './app-presentation';

class AppContainer extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      playing: null,
      filteredMovies: null,
    };
    this.startPlaying = this.startPlaying.bind(this);
    this.stopPlaying = this.stopPlaying.bind(this);
    this.filterMovies = this.filterMovies.bind(this);
  }

  componentWillMount() {
    if (localStorage.user) {
      try {
        const user = JSON.parse(localStorage.user);
        this.setState({ user });
        this.fetchMovies();
      } catch (e) {
        // eslint-disable-next-line no-console
        console.error(e);
      }
    }
  }

  fetchMovies() {
    fetch('/movies.json')
      .then(rsp => rsp.json())
      .then(movies => this.setState({ allMovies: movies }));
  }

  startPlaying(movie) {
    this.setState({ playing: movie });
  }

  stopPlaying() {
    this.setState({ playing: null });
  }

  filterMovies(search) {
    let filteredMovies = null;

    if (search) {
      const searchLower = search.toLowerCase();
      const { allMovies } = this.state;
      filteredMovies = allMovies.filter(m => m.title.toLowerCase().indexOf(searchLower) !== -1);

      if (!filteredMovies.length) {
        filteredMovies = null;
      }
    }

    this.setState({ filteredMovies });
  }

  render() {
    const { user, playing } = this.state;

    return (
      <AppPresentation
        user={user}
        startPlaying={this.startPlaying}
        playing={playing}
        stopPlaying={this.stopPlaying}
        filterMovies={this.filterMovies}
      />
    );
  }
}

export default AppContainer;

app-presentation.jsx

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import LoginPage from './login-page';
import PlayingMovie from './playing-movie';
import MainPage from './main-page';
import AjaxLoading from './utils/ajax-loading';

const AppPresentation = ({ user, movies, playing, startPlaying, stopPlaying, filterMovies }) => {
  let component = null;

  if (!user) {
    component = <LoginPage />;
  } else if (!movies) {
    component = <AjaxLoading />;
  } else if (playing) {
    component = <PlayingMovie movie={playing} stopPlaying={stopPlaying} />;
  } else {
    component = <MainPage user={user} movies={movies} startPlaying={startPlaying} filterMovies={filterMovies} />;
  }

  return (
    <div className="container">
      {component}
    </div>
  );
};

AppPresentation.propTypes = {
  user: PropTypes.object,
  movies: PropTypes.array,
  playing: PropTypes.object,
  startPlaying: PropTypes.func.isRequired,
  stopPlaying: PropTypes.func.isRequired,
  filterMovies: PropTypes.func.isRequired,
};

const mapStateToProps = (state, props) => Object.assign({}, 
  props, {
  user: state.user,
  movies: state.movies.movies,
})

export default connect(
  mapStateToProps,
)(AppPresentation);

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import AppContainer from './app-container';

import reducers from './reducers';

//  npm install bootstrap --save
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

npm-install.sh

npm install redux-thunk --save

reducers\index.js

import { combineReducers } from "redux";
import movies from "./movies";
import user from "./user";

const reducers = combineReducers({
  movies,
  user
});

export default reducers;

reducers\movies.js

const movies = (state = {}, action) => {
  switch (action.type) {
    case "MOVIES-LOADED":
      return Object.assign({}, state, { movies: [...action.payload] });

    default:
      return state;
  }
};

export default movies;