2016-09-15 17 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') 
); 

任何提示都表示赞赏!谢谢!

回答

2

但是如何从操作中访问存储?

我不认为从actions访问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. 
    } 
} 

而且你还可以在这里看看更新的答案, react-router-redux webpack dev server historyApiFallback fails

它显示了如何您可以直接从组件访问并发送push

相关问题