在無狀態響應組件中正確訪問狀態和加載數據

我想知道如何使用狀態值（如用戶標識）作爲參數正確加載無狀態組件的數據。目前我嘗試在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

在無狀態響應組件中正確訪問狀態和加載數據

回答

相關問題