2016-09-15 8 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으로 액세스하는 것이 좋습니다.

는 는하지만

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. 
    } 
} 

을 할 수 그리고 당신은 또한 여기에 업데이트 된 답변을 볼 수 있습니다 당신은 당신의 actions 파일에서 찾고있는 결과를 얻을 수 react-router-redux webpack dev server historyApiFallback fails

그것은 방법을 보여줍니다

구성 요소에서 직접 push에 액세스하고 파견 할 수 있습니다.