Question

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

当我第一次开始申请时，改变第一条路线， @@ router / LOCATION_CHANGE被触发但我的状态为空，然后在该操作之后（我定义的LOAD_NOTES -action）被触发（加载我的数据 - 服务器请求） - 第一次我有小错误flash（未定义变量 - 我的状态是空的，因为数据在LOAD_NOTES_REQUEST操作中加载，该操作在加载数据后触发＆＃34; LOAD_NOTES操作完成。）

知道为什么会发生这种情况 - 如何以适当的方式填补路线变化状态？

修改

动作/ 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);
        });


  };
}

减速器/ 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;

容器/ 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

在完成您的问题和代码后，我可以看到您问题的关键部分是：

知道为什么会发生这种情况 - 如何以适当的方式填补路线变化状态？

好吧，您可能需要在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

电子反应 - 样板 - 路线变化和状态

1 个答案: