Question

在文档中有关于如何通过Redux操作（https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions）发布导航事件的一些信息，但是如何从操作中访问存储？

我的操作会触发调度（推送（＆＃39; / foo＆＃39;））：

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

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

Answer 1

但是如何从动作中访问商店？

我认为从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。

如何在动作中访问商店以在react-router-redux中调度推送？

1 个答案: