React Router 4 + Redux 5 Actions 未传递给 Reducer

Question

我有一个使用 react-router 4 和 redux 5 的 react 项目 如果我发出一个简单的 axios 请求，我可以接收数据，但是当尝试将其传递给减速器时，我会收到减速器回调，但没有来自操作的数据，也没有在我的商店中看到它。所以我想弄清楚如何接收这些数据。在控制台日志中，我从减速器返回 2 条消息。第一个是@@redux/INIT，第二个是：@@redux/PROBE_UNKNOWN_ACTION_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')
);

index.js (rootReducer)

import { combineReducers } from 'redux';
import adverts from './adverts_reducer';

const rootReducer = combineReducers({
  adverts,
});

export default rootReducer;

reducer 文件：

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

编辑：

动作创建者：

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

Answer 1

您错过了您的操作文件上的 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
})

如果对你有帮助，请投票 谢谢霍德