javascript - electronics-react-boilerplate - 路线变化和状态

Question

我正在使用 electron-react-boilerplate 启动一个小型应用程序，使用 NeDB 进行持久化任务跟踪。

当我第一次开始申请并更改第一条路线时，@@router/LOCATION_CHANGE 被触发，但我的状态为空，然后在该操作(LOAD_NOTES -我定义的操作)被触发(加载我的数据 - 服务器请求) - 第一次我有小错误闪光( undefined variable - 我的状态为空，因为数据正在 LOAD_NOTES_REQUEST 操作中加载，该操作在数据加载完成后“触发”LOAD_NOTES 操作)。

知道为什么会发生这种情况 - 如何以正确的方式在路线更改时填充我的状态？

编辑

actions/project.js

import * as ActionTypes from '../constants/ActionTypes';

import * as axios from 'axios';
import Alert from 'react-s-alert';


const baseURL = 'http://localhost:3000';

export function addProject(project) {
  return {
    type: ActionTypes.ADD_PROJECT,
    project
  };
}

export function addProjectRequest(project) {


  return dispatch => {
    dispatch(addProject(project));

        axios.post(`${baseURL}/api/addProject`, project)
        .then(function (response) {

          Alert.success('Test message 3', {
           position: 'top-right',
          });

        })
        .catch(function (response) {
        console.log(response);
        });


  };
}

reducers/projectReducer.js

import * as ActionTypes from '../constants/ActionTypes';

const initialState = { projects: [], project:null};

const projectsReducer = (state = initialState, action) => {
  switch (action.type) {


    case ActionTypes.ADD_PROJECT :

    return {
      projects: [{
        projectName: action.event.projectName,
        projectWorkOrder: action.event.projectWorkOrder,
        projectClient: action.event.projectClient,
        projectDescription: action.event.projectDescription,
        projectStatus: action.event.projectStatus,
        _id: action.event._id,
      }, ...state.projects],
      project: state.project

     };



    case ActionTypes.ADD_PROJECTS :

      return {

        projects: action.projects,
        project: state.project,
      };

    case ActionTypes.GET_PROJECT :

        return {

          projects: state.projects,
          project: action.project
        };

    default:
      return state;
  }
};

export default projectsReducer;

containers/projectDetailContainer.js

import React, { PropTypes, Component } from 'react';
import { bindActionCreators } from 'redux';
import ProjectDetail from '../components/projects/ProjectDetail';
import { connect } from 'react-redux';
import * as ProjectActions from '../actions/project';


class ProjectDetailContainer extends Component {
  constructor(props, context) {
    super(props, context);
  }

  componentDidMount() {
    this.props.dispatch(ProjectActions.getProjectRequest(this.props.params.id));
  }


  render() {
    return (
      <div>
          <ProjectDetail singleProject={this.props.project}  />
      </div>
    );
  }
}


ProjectDetailContainer.need = [(params) => {

  return Actions.getProjectRequest.bind(null, params.id)();
}];

ProjectDetailContainer.contextTypes = {
  router: React.PropTypes.object,
};


function mapStateToProps(store) {


  return {

      project: (store.projectsReducer.project)
  };
}



export default connect(mapStateToProps)(ProjectDetailContainer);

组件/ProjectDetail.js

import React, { Component } from 'react';


export default class ProjectDetail extends Component {

  constructor(props, context) {
   super(props, context);


 }


  render() {

    return (
         <div>
          <h1>Project details</h1>
          <div>{(this.props.singleProject[0].projectName)}</div>

         </div>
    );
  };
}

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import HomePage from './containers/HomePage';
import CounterPage from './containers/CounterPage';

import Dashboard from './containers/Dashboard';

import NewProjectContainer from './containers/NewProjectContainer';
import ProjectsListContainer from './containers/ProjectsListContainer';
import ProjectDetailContainer from './containers/ProjectDetailContainer';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="/counter" component={CounterPage} />
    <Route path="/new-project" component={NewProjectContainer} />
    <Route path="/projects-list" component={ProjectsListContainer} />
    <Route path="/projects/:id" component={ProjectDetailContainer} />
  </Route>
);

Answer 1

查看您的问题和代码后，我可以看到您问题的关键部分是:

Any idea why is that happening - how to populate my state at route change in proper way ?

好吧，您可能需要使用 routes.js 中的组件。此 React Router 主要文档将提供帮助:https://github.com/ReactTraining/react-router/blob/master/docs/API.md#route

此外，如果您正在寻找其他东西，以下内容也可能会有所帮助:

fetching data before changing route with react-router

redux store state between page route