Redux-thunk：`dispatch 不是函数`答案

【问题标题】：Redux-thunk: `dispatch is not a function`Redux-thunk：`dispatch 不是函数`
【发布时间】：2017-10-31 02:12:24
【问题描述】：

所以，我遇到了返回上述错误的操作问题（请参阅附图），而不是按预期更新 redux 状态。我在这里俯瞰什么？

actionCreators.js

export function userToken(token) {
  console.log('userToken has been fired');
  return (dispatch) => {
    dispatch({
      type: 'Graphcool_Token',
      payload: token
    });
  } 
}

App.js

....
// Root Query
const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, {
  options: {
    cachePolicy: 'offline-critical', 
    fetchPolicy: 'cache-first',
  },
});

export const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(actionCreators, dispatch);
}

export default compose(
  allPostsCommentsQuery,
  connect(mapDispatchToProps)
)(Main);

减速器

var tokenDetails = function(state, action) {

  if (state === undefined) {
    state = [];
  }

  switch (action.type) {
    case 'Graphcool_Token':
      const newState = [action.payload];
      return newState;
    default:
      return state;
  }
}

export default tokenDetails;

LoginUser.js

  signinUser: function(emailID, passwordID) {

    const email = emailID;
    const password = passwordID;

    this.props.client.mutate({
      mutation: signinUser_Mutation,
      variables: {
        email,
        password,
      },
      options: {
        cachePolicy: 'offline-critical', 
        fetchPolicy: 'cache-first',
      },
    })
    .then(this.updateStateLoginDetails)
    .catch(this.handleSubmitError);
  },

  updateStateLoginDetails: function({data}) {
    this.props.userToken(data.signinUser.token);
  },

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate} from 'redux-persist';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router'
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
import client from './apolloClient';
import localForage from 'localforage';

const middlewares = [thunk, client.middleware()];

const enhancers = compose(
    applyMiddleware(...middlewares),
    (typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' || process.env.NODE_ENV !== 'production') ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f,
    autoRehydrate(),
);

const store = createStore(
  rootReducer,
  {}, // initial state
  enhancers
);

// begin periodically persisting the store
persistStore(store, {storage: localForage});

export const history = syncHistoryWithStore(
  browserHistory, 
  store
);

if(module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}

export default store;

【问题讨论】：

你能展示你是如何创建/配置商店的
您是否正在导入您的操作和 bindActionCreators？ IE。 import{ bindActionCreators } from 'redux';import { actionCreators } from '../actions/actionCreators';
connect(mapDispatchToProps): mapDispatchToProps不是connect的第二个参数吗？
@PriyeshKumar我已更新我的问题以显示我的商店。
@DavinTryon 正确。唯一的区别是我正在做的，import * as actionCreators from '../actions/actionCreators';

标签： javascript redux redux-thunk apollo

【解决方案1】：

你应该传递给connect的第一个参数是mapStateToProps，它是一个接收state和组件props的函数。如果你不需要它，你应该在那里添加null：

connect(null, mapDispatchToProps)(Main)

顺便说一句，一般来说，你不需要bindActionCreators..通常返回一个对象就足够了，比如：

const mapDispatchToProps = {
  someActionName,
  someOtherAction,
}

【讨论】：

您的信息为我解决了这个问题。非常感谢。
@enapupe 谢谢！