2016-09-15 49 views
0

ドキュメントには、Reduxアクション(https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions)を使用してナビゲーションイベントを発行する方法についての情報がありますが、アクションからストアにアクセスする方法はありますか?react-router-reduxにプッシュをディスパッチするアクションでストアにアクセスする方法は?

export function fetchReservationData(reservation_code, onError) { 

    return (dispatch) => { 
     fetch(apiConfig.find_my_product) 
      .then(function(response) { 

       if (response.ok) { 

        response.json().then(function (data) { 
         if (data.trolley.length > 0) { 
          dispatch({ type: UPDATE_TROLLEY_DATA, payload: data }); 
          // todo: use router-redux push instead 
          //window.location.pathname = '/your-trolley'; 
          dispatch(push('/your-trolley')); 
         } else { 
          dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });       
         } 
        }); 

       } else { 

        // todo: handle exception 
        console.log('Network response was not ok.'); 
        dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError }); 

       } 

      }) 
      .catch(function (error) { 

       // todo: handle error 
       // handle it gracefully asked user to try again, if the problem keeps ocurring to 
       // talk with a staff member to report it to the backend team 
       console.log('There has been a problem with your fetch operation: ' + error.message); 
       dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError }); 

      }); 
    } 

} 

一方、それが動作するアプリケーションのエントリポイントから呼び出された場合(コメントタイムアウトを参照してください):

import React from 'react'; 
import ReactDOM from "react-dom"; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes'; 
import { syncHistoryWithStore, routerMiddleware, push } from 'react-router-redux' 
import { createStore, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import promise from 'redux-promise'; 
import reducers from './reducers'; 
import thunk from 'redux-thunk'; 

// const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 
// const store = createStoreWithMiddleware(reducers); 
const store = createStore(
    reducers, 
    applyMiddleware(thunk), 
    applyMiddleware(routerMiddleware(browserHistory)) 
); 
const history = syncHistoryWithStore(browserHistory, store); 

// this needs to work in the actions 
// setTimeout(() => { 
// store.dispatch(push('/your-trolley')); 
// }, 3000); 

ReactDOM.render(
    <Provider store={ store }> 
     <Router history={ history } routes={ routes } /> 
    </Provider>, 
    document.getElementById('app') 
); 

私の行動は、ディスパッチ(プッシュ( '/ foo' を))トリガどんなヒントもありがとう!ありがとうございました!

答えて

2

どのようにアクションからストアにアクセスしますか?

storeからactionsにアクセスすると思われません。

しかし、あなたが探している結果を得るためにあなたのactionsファイルにあなたが

import { push } from 'react-router-redux'; 

export function changePage(url) { 
    return push(url); 
} 


// since you're using thunk middleware, you can also do 
export function someAction(url) { 
    return dispatch => { 
    dispatch(push(url)); 
    // and you can call dispatch multiple times here. 
    } 
} 

を行うことができそして、あなたはまた、ここで更新答えで react-router-redux webpack dev server historyApiFallback fails

を見ることができるそれは方法を示していますpushに直接アクセスしてコンポーネントからディスパッチすることができます。

関連する問題