如何访问 store in action 以在 react-router-redux 中发送推送？答案

【问题标题】：how to access store in actions to dispatch push in react-router-redux?如何访问 store in action 以在 react-router-redux 中发送推送？
【发布时间】：2023-03-26 23:43:01
【问题描述】：

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

我的动作触发了 dispatch(push('/foo')):

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

感谢任何提示！谢谢！

【问题讨论】：

标签： reactjs react-redux jsx react-router-redux

【解决方案1】：

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

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

【讨论】：