Refresh view after DB insert React Redux
<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>