title: Refresh view after DB insert React Redux
body: <p>I am creating an app with React/Redux, I have successfully managed to create an action/reducer to insert a record into my database - which is <a href="http://www.forerunnerdb.com/" rel="nofollow">ForerunnerDB</a></p>
  
  <p>My code so far looks like this:</p>
  
  <p>PAGE</p>
  
  <pre><code>class Projects extends Component {
    componentWillMount() {
      this.props.FetchProjects();
    }
  
    renderProjects() {
      return this.props.projects.map( ( project ) =&gt; {
        return (
          &lt;li key={ project._id } &gt;
            &lt;Link to={ `/pages/${project._id}` } &gt;{ project.title } { project.timestamp.toString() }&lt;/Link&gt;
          &lt;/li&gt;
        );
      });
    }
  
    render() {
      return (
        &lt;div className="projects container"&gt;
          &lt;div className="projects"&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;CreateNewProject /&gt;
              &lt;/li&gt;
              { this.renderProjects() }
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps( state ) {
    return {
      projects: state.projects.all
    }
  }
  
  export default connect( mapStateToProps, actions )( Projects );
  </code></pre>
  
  <p>I am using the <code>&lt;CreateNewProject /&gt;</code> component to insert the record and the <code>renderProjects()</code> method to fetch the list of projects. The projects are rendered just fine if I refresh the page, but I cannot figure out to get the list to update at the point a record is inserted into the DB automatically.</p>
  
  <p>Can anyone help point me in the right direction?</p>
  
  <p>Many thanks in advance.</p>
  
  <p>EDIT</p>
  
  <p>PROJECTS actions</p>
  
  <pre><code>// Fetch existing projects
  export function FetchProjects() {
    return ( dispatch ) =&gt; {
      // Load projects collection
      projectsCollection.load( ( err ) =&gt; {
        // if there are no errors
        if( !err ) {
          // Set up action payload
          const projects = projectsCollection.find();
          // Dispatch the action using the above
          dispatch({
            type: FETCH_PROJECTS,
            payload: projects
          });
        // If there's an error loading the projects collection
        } else {
          //Log the error
          console.log( `ERR! ${err}` );
        }
      });
    }
  }
  // Create new project
  export function CreateProject( { projectName } ) {
    return ( dispatch ) =&gt; {
      // Load projects collection
      projectsCollection.load( ( err ) =&gt; {
        // If there are no errors
        if( !err ) {
          // Set up action payload
          // Insert record into projects collection
          const projectCreate = projectsCollection.insert({
            title: projectName,
            timestamp: fdb.make( new Date() )
          }, ( result ) =&gt; {
            // If insertion is successful
            if( result.inserted.length ) {
              // Save the projects collection (persisted to local storage)
              projectsCollection.save( ( err ) =&gt; {
                // If there are no errors
                if( !err ) {
                  console.log( result.inserted[0] )
                } else {
                  // Log the error
                  console.log( `ERR! ${err}` );
                }
              });
            } else {
              // Log the failed insertion
              console.log( `ERR! ${result.failed}` );
            }
          });
          // Dispatch the action using the above
          dispatch({
            type: CREATE_PROJECT,
            payload: projectCreate
          });
        // If there's an error loading the projects collection
        } else {
          // Log the error
          console.log( `ERR! ${err}` );
        }
      });
    }
  }
  </code></pre>
  
  <p>FETCH_PROJECTS reducer</p>
  
  <pre><code>// Import dependencies
  import { FETCH_PROJECTS } from '../../actions/types';
  
  // Set inital state
  const INITIAL_STATE = { all: [] }
  
  export default function( state = INITIAL_STATE, action ) {
    switch( action.type ) {
      case FETCH_PROJECTS:
        return { ...state, all: action.payload }
    }
  
    return state;
  }
  </code></pre>
  
  <p>CREATE_PROJECTS reducer</p>
  
  <pre><code>import { CREATE_PROJECT } from '../../actions/types';
  
  export default function( state = {}, action ) {
    switch( action.type ) {
      case CREATE_PROJECT:
        return { ...state, projects: action.payload }
    }
  
    return state;
  }
  </code></pre>