ステートレス反応コンポーネントの状態へのアクセスとデータのロード

Question

ユーザーIDなどの状態値を引数として使用してステートレスコンポーネントのデータを正しくロードする方法を知りました。現時点では、onEnter関数でデータをロードしようとしていますが、その段階で状態にアクセスできないようです。

onEnterにデータをロードすることは適切ですか、または状態にアクセスできるように別の方法で行ったり別の方法で行うことが期待されますか？

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

index.jsが作成されます。プロジェクトが反応し、ルータv2と異なる部分は、このように、別々のディレクトリに分割されている使用している現在の設定

について

さらなる詳細状態を保持するストア。現在のユーザのAppContainerデータに

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')); 

onEnterを使用してロードされ、データはuserような状態で格納されています。コールバックは、処理を続行する前に応答を待つために使用されます。 onEnterTodosでは、現在のユーザーのIDをstateから引数として取得する必要があります。そして私はそこに州へのアクセス方法を知らない。

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; 

ルートが引数としてストアを取る関数から返されるべきであることをいくつかの項は、一方がフォーカス取得時の関数の引数としてストアを通過することができます。つまり、ルーティング設定を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; 

Answer 1

私が要求をチェーンこの問題を解決するには：ここで

は途中でコンテナに関連付けられているコンポーネントです。したがって、onEnter関数で状態に直接アクセスすることはできませんが、この場合はAPIを使用できます。

フォーカス取得時、次の機能がAppContainerに変更されました：

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

は次に、2つの新しいアクションが作成されました。最初のものは、現在のユーザーに関する情報を得るために、現在は約束を返します。

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}); 
    }; 
};