Reactjs React路由器4+；Redux 5动作未传递到减速器

我有一个使用react路由器4和redux 5的react项目 如果我发出一个简单的axios请求，我可以接收数据，但是当我尝试将数据传递给reducer时，我会得到reducer回调，但是没有来自操作的数据，也没有在我的存储中看到它。所以我想弄清楚如何接收这些数据。在控制台日志中，我从reducer返回了2条消息。第一个是

@@redux/INIT

，第二个是：

@@redux/PROBE\u UNKNOWN\u ACTION\u 1.d.5.t.z.5

index.js：

  import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Redux
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; // Redux Dev Tools for Chrome
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import { Provider } from 'react-redux';

// Redux Promise Middleware
import promiseMiddleware from 'redux-promise-middleware';

// Redux Thunk Middleware for Action Creators
import thunk from 'redux-thunk';

// React Router 4
import createHistory from 'history/createBrowserHistory';

import reducers from './reducers';

// import configureStore from './reducers/configureStore';
// const store = configureStore();

const history = createHistory()
const middleware = routerMiddleware(history)

const store = createStore(combineReducers({...reducers, router: routerReducer}),
  composeWithDevTools(applyMiddleware(promiseMiddleware(),thunk)));


ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

减速器文件：

import { FETCH_ADVERTS } from '../actions/adverts_action';

export default function(state = {}, action) {
  console.log('Reducer found', action);

  switch(action.type) {
    case FETCH_ADVERTS:
      return {
        adverts: action.payload.result,
        ...state
      };
  }
  return state;
}

操作文件：

import axios from 'axios';

const ROOT_URL = `https://somecoolurltopullin`;

export const FETCH_ADVERTS = 'FETCH_ADVERTS';

export function fetchHomepageAdverts() {
  const url = `${ROOT_URL}/images/`;
  const request = axios.get(url);

  console.log('Action Request:', request);

  return {
    type: FETCH_ADVERTS,
    payload: request
  };
}

编辑：

actioncreator：

import axios from 'axios';

const ROOT_URL = `urlhere`;

export const FETCH_ADVERTS = 'FETCH_ADVERTS';

export function fetchHomepageAdverts() {
 const url = `${ROOT_URL}/images`;
 return function (dispatch) {

     const request = axios.get(url)
     .then(result=>{
          console.log('Action Request:', request);

          dispatch({
             type: FETCH_ADVERTS,
             payload: request
          });
      })
      .catch(err=>{
          // handle the err
      })
  }
}

---

您缺少操作文件上的disaotch，在执行api方法后，您应该将结果分派给还原器。 在reduce中，您使用名称：FETCH_ADVERTS

请在返回响应之前添加分派

import axios from 'axios';

const ROOT_URL = `https://somecoolurltopullin`;

export const FETCH_ADVERTS = 'FETCH_ADVERTS';

export function fetchHomepageAdverts() {
  const url = `${ROOT_URL}/images/`;
  return function (dispatch) {

     const request = axios.get(url)
         .then(result=>{
              console.log('Action Request:', request);

              dispatch({
                 type: FETCH_ADVERTS,
                 payload: result
              });
          })
          .catch(err=>{
              // handle the err
          })
  }
}

通过这一更改，我还建议使您的api操作异步，并使api返回时的分派方法得到响应，类似于：

api.getData().then(rsult=>{
 dispatch({type: FETCH_ADVERTS,payload: request});
})
.catch(err=>{
// do something for err handling
})

如果对你有帮助，请投票

---

感谢Hod

在action creator中，我收到了一条错误消息“dispatch”未定义。我只需在api调用之前用dispatch的add更新答案，然后将其签出编辑后的主要帖子，将其更改为我以前使用过的格式，但仍然没有得到结果，但它删除了错误消息，现在没有错误，但没有数据切换到您重新编写的格式，没有错误，但没有数据返回reducer操作：应为action.payload.result

api.getData().then(rsult=>{
 dispatch({type: FETCH_ADVERTS,payload: request});
})
.catch(err=>{
// do something for err handling
})