Question

我正在使用React / Redux创建一个应用程序，我已成功设法创建一个动作/减少器以将记录插入我的数据库 - 这是ForerunnerDB

到目前为止我的代码看起来像这样：

PAGE

我使用class Projects extends Component { componentWillMount() { this.props.FetchProjects(); } renderProjects() { return this.props.projects.map( ( project ) => { return ( <li key={ project._id } > <Link to={ `/pages/${project._id}` } >{ project.title } { project.timestamp.toString() }</Link> </li> ); }); } render() { return ( <div className="projects container"> <div className="projects"> <ul> <li> <CreateNewProject /> </li> { this.renderProjects() } </ul> </div> </div> ); } } function mapStateToProps( state ) { return { projects: state.projects.all } } export default connect( mapStateToProps, actions )( Projects );组件插入记录和<CreateNewProject />方法来获取项目列表。如果我刷新页面，项目就会很好地呈现，但是我无法想象在将记录自动插入数据库的时候让列表更新。

任何人都可以帮我指出正确的方向吗？

非常感谢提前。

修改

项目行动

renderProjects()

FETCH_PROJECTS reducer

// Fetch existing projects
export function FetchProjects() {
  return ( dispatch ) => {
    // Load projects collection
    projectsCollection.load( ( err ) => {
      // 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 ) => {
    // Load projects collection
    projectsCollection.load( ( err ) => {
      // 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 ) => {
          // If insertion is successful
          if( result.inserted.length ) {
            // Save the projects collection (persisted to local storage)
            projectsCollection.save( ( err ) => {
              // 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}` );
      }
    });
  }
}

CREATE_PROJECTS reducer

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

Answer 1

您应该将操作传递给CreateNewProject组件。这样，您可以触发操作以从组件插入新记录。然后，该操作将通过reducer更新商店。一旦商店更新，它将触发对Projects组件的更新，因为它将其中一个props映射到项目商店。

编辑 - 提供的其他代码显示更多：

我注意到可能导致问题的一些事情。在PROJECTS操作中，CreateProject函数存在同步问题。您试图创建projectCreate，然后将其作为操作中的有效内容传递。问题是projectsCollection.insert()是一个异步函数（由回调表示）。这意味着dispatch()调用具有projectCreate的未定义值。

我建议将dispatch()调用放在最后一个回调中，projectsCollection.save()：

      projectsCollection.save( ( err ) => {
          // If there are no errors
          if( !err ) {
            console.log( result.inserted[0] )
            // dispatch the successful result
            dispatch({
              type: CREATE_PROJECT,
              payload: result.inserted[0]
            });
          } 
          ...
       }

DB插入React Redux后刷新视图

1 个答案: