Question

我有一个使用react-router 4和redux 5的反应项目如果我做一个简单的axios请求我可以接收数据，但是当我尝试将它传递给reducer时，我会收到reducer回调，但是没有来自动作的数据也没有在我的商店中看到它。所以我想弄清楚如何收回这些数据。在控制台日志中，我从reducer中收到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
  };
}

编辑：

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

Answer 1

您错过了动作文件中的disaotch，执行api方法后，您应该将结果分配给reducers。在您的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
})

如果有帮助请投票谢谢你，

React Router 4 + Redux 5动作未传递给Reducer

1 个答案: