电子反应样板-路线更改和状态

Question

我正在使用电子反应样板启动一个用于使用NeDB进行持久性跟踪任务的小型应用程序。

当我第一次启动应用程序并更改第一条路线时，将触发@@ router / LOCATION_CHANGE，但我的状态为空，然后触发该操作（LOAD_NOTES-我定义的操作）后（加载数据-服务器请求） ）-第一次出现小错误错误（不确定的变量-我的状态为空，因为数据正在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;

container / 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

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

在使用react-router更改路由之前获取数据

页面路由之间的redux存储状态