Question

我正在尝试从componentWillMount调度一个函数。绑定动作创建函数fetchDraftAdventures在componentWillMount之外工作，但不在内部工作。

componentWillMount() {
    let {draftAdventures, editableAdventures} = this.props;
    console.log("this props")
    this.props.fetchDraftAdventures(1);
    console.log(' adventures props', this.props)
  }

应用已连接

export default withRouter(connect(
  state => {
    return {
      editableAdventures: state.editableAdventures,
      draftAdventures: state.draftAdventures,
    };
  },
  dispatch => ({
    fetchAdventureEditable: bindActionCreators(fetchAdventureEditable, dispatch),
    fetchEditableAdventures: bindActionCreators(fetchEditableAdventures, dispatch),
    fetchAdventureDraft: bindActionCreators(fetchAdventureDraft, dispatch),
    fetchDraftAdventures: bindActionCreators(fetchDraftAdventures, dispatch),
    dispatch
  })
)(AdventuresDashboard));

这是行动本身：

// Constants
import {
  GET_DRAFT_ADVENTURES_REQUESTED,
    GET_DRAFT_ADVENTURES_SUCCEEDED,
    GET_DRAFT_ADVENTURES_REJECTED
} from '../../../constants/Actions'

import {get} from '../../../lib/request';

const DraftAdventures = (args) => {
  console.log('draft adventures', args)
  const Authorization = localStorage.getItem('authToken');

  const pageNumber = args;
  const lastIndex = pageNumber.length - 1;
  let pageParam = '';

  if (pageNumber[lastIndex]) {
    pageParam = `?page=${pageNumber[lastIndex]}`

    return dispatch => {

      dispatch({ type: GET_DRAFT_ADVENTURES_REQUESTED, payload: `Fetching Draft Adventures` })
      get(`/draft-adventures/${pageParam}&ordering=-updated_at`, {},
      {Authorization})
      .then(response => {
        if (response) {
          if (response.data) {
            let page = null;
            if (response.data.next !== null) {
              page = response.data.next.split('page=')[1];
              page = Number(page);
            }
            dispatch({ type: GET_DRAFT_ADVENTURES_SUCCEEDED, payload: response.data, pageNumber: Number(page)})

          } else {
            dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: 'NULL response.data' })
          }
        } else {
          dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: 'NULL response' })
        }
      }).catch(error => {
        console.log('errorer', error)
        dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: error })
      })

    }
  }
};

export default (DraftAdventures);

对此的响应是以下堆栈跟踪：

据我所知，从thunk中间件传递到路由器中间件的操作是未定义的。在我的fetchDraftAdventure函数中，dispatch({ type: GET_DRAFT_ADVENTURES_REQUESTED, payload: 'Fetching Draft Adventures' })永远不会被调用。为什么不呢？

另外，我的商店配置文件：

// Libraries
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import {logger} from 'redux-logger';

import createHistory from 'history/createBrowserHistory'
import { routerMiddleware } from 'react-router-redux'

// Components
import DevTools from '../devTools/DevTools';

// Reducers
import reducer from '../reducers';

// Config
import reduxLoggerConfig from '../config/reduxLoggerConfig';

//const logger = createLogger(reduxLoggerConfig);

const history = createHistory()
const middlewareRouter = routerMiddleware(history)


const createDevStoreWithMiddleware = compose(
  applyMiddleware(thunk, middlewareRouter, logger),
  DevTools.instrument()
)(createStore);

console.log('createDev store', createDevStoreWithMiddleware(reducer))
export default function configureStore() {

  var store = createDevStoreWithMiddleware(reducer);

  // enable webpack hot module replacement for reducers
  if (module.hot && process.env.BUILD_TARGET === 'local') {
    module.hot.accept('../reducers/index.js', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

Answer 1

如果这种情况不正确：if (pageNumber[lastIndex])，那么您的动作创建者DraftAdventures不会返回任何内容（例如，它会返回undefined。Redux会尝试发送此未定义的操作，您将获得错误。

动作创建者（本例中为DraftAdventures）需要始终返回动作。该操作可以是一个简单的对象，也可以是一个thunk（也就是函数），或者你已经安装了redux中间件来处理的其他东西。

你的动作创建者有时会返回一个thunk（好！），有时会返回undefined（坏！）

Answer 2

我认为问题在于你的＆＃34; thunk＆＃34;。

这不是thunk签名，您没有返回函数。

更改为：

const DraftAdventures = (args) => ({dispatch}) => {...

redux-thunk检查对象是否为typeof function 您的回复位于if声明中。

Redux Thunk Action =在componentWillMount

2 个答案: