在无状态响应组件中正确访问状态和加载数据

我想知道如何使用状态值（如用户标识）作为参数正确加载无状态组件的数据。目前我尝试在onEnter函数中加载数据，但我似乎无法访问该阶段的状态。在无状态响应组件中正确访问状态和加载数据

将数据加载到onEnter中是否合适，或者是否需要在别处或以不同的方式访问该状态？

/index.js 
/actions/ 
/components 
/containers 
/reducers

的index.js被创建：

有关当前设置

该项目使用反应路由器v2和不同的部分被分成不同的目录中，这样的进一步的细节持有该州的商店。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {createStore, applyMiddleware} from 'redux'; 
import {Provider} from 'react-redux'; 
import thunk from 'redux-thunk'; 
import promiseMiddleware from 'redux-promise-middleware'; 
import {reactWeb} from './reducers'; 
import AppContainer from './containers/AppContainer'; 

import './css/index.css'; 

let middlewares = [thunk, promiseMiddleware()];  
let store = createStore(reactWeb, applyMiddleware(...middlewares)); 

ReactDOM.render(
    <Provider store={store}> 
    <AppContainer/> 
</Provider>, document.getElementById('root'));

在当前用户的AppContainer数据被加载使用onEnter并且该数据被存储在状态user。回调用于在继续之前等待响应。在onEnterTodos我需要从状态获取当前用户的ID作为参数使用。我不知道如何进入那里的州。

import {connect} from 'react-redux'; 
import App from '../components/App'; 
import {init} from '../actions'; 
import {getCurrentUser} from '../actions/profile'; 
import {getTodos} from '../actions/todos'; 

const mapStateToProps = (state) => { 
    return { 
     isLoggedIn: state.loggedIn, 
     redirectUrl: state.redirectUrl, 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onEnterApp: (nextState, replace, callback) => { 
      // Get user data 
      dispatch(getCurrentUser(nextState, callback)); 
      callback(); 
     }, 
     onEnterTodos: (nextState, replace) => { 
      // Get todos of the user - how to get the userid 
      dispatch(getTodos(795558)); 
     } 
    }; 
}; 

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App); 

export default AppContainer;

有人声称的路由应，将采取的商店作为自变量的函数返回，那么可以通过存储作为参数传递给一个的OnEnter功能。这意味着将路由设置移动到index.js，对我来说问题是调度功能不可用。

这里顺便说一下与容器关联的组件：

import React from 'react'; 
import StartContainer from '../containers/StartContainer'; 
import TodosContainer from '../containers/TodosContainer'; 

import {Router, Route, browserHistory, IndexRoute, IndexRedirect} from 'react-router'; 

const App = ({onEnterApp, onEnterTodos}) => { 
    let routes = (
     <Route path="/" onEnter={onEnterApp}> 
      <IndexRedirect to="start"/> 
      <Route path="start" component={StartContainer}/> 
      <Route path="todos" onEnter={onEnterTodos} component={TodosContainer}/> 
     </Route> 
    ); 

    return (
     <div> 
      <Router history={browserHistory} routes={routes}/> 
     </div> 
    ) 
}; 

App.propTypes = {}; 

export default App;

来源

2017-05-17 John P

为了解决这个我链接的要求。所以，在onEnter函数中不能直接访问状态，但在这种情况下，我可以依赖API。

以下的OnEnter函数在AppContainer改为：

onEnterUsers: (nextState, replace) => { 
    dispatch(getEmployees()); 
}

然后创建一个两个新动作。第一个，获取有关当前用户的信息，现在只是返回一个承诺。

export const getCurrentUserPromise = (nextState, callback) => { 

    let headers = { 
     'Accept': 'application/json' 
    }; 
    return apiCall('get', config.apiEndPoint + 'login/currentLogin', null, headers); 

};

最后，拿到待办事项我用getCurrentUserPromise和链条的待办事项请求。

export const getEmployees =() => { 
    let headers = { 
     'Accept': 'application/json' 
    }; 
    return dispatch => { 
     const payloadUser = getCurrentUserPromise() 
      .then(res => { 
       const payload = apiCall('get', config.apiEndPoint + 'todos/find?userid=' + res.userid, null, headers) 
        .then(res => { 
         return res; 
        }); 
       dispatch({type: 'GET_TODOS', payload}); 
       return res; 
      }); 
     return dispatch({type: 'GET_CURRENT_USER', payloadUser}); 
    }; 
};

来源

2017-05-18 09:12:39

在无状态响应组件中正确访问状态和加载数据

回答

相关问题