繁体   English   中英

Redux-thunk:“调度不是函数”

[英]Redux-thunk: `dispatch is not a function`

因此,我遇到的问题是返回上述错误的操作(请参见附件图像),而不是按预期更新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; 

在此处输入图片说明

您应该传递给connect的第一个参数是mapStateToProps ,它是一个接收state和组件props的函数。如果不需要它,您应该在其中添加null

connect(null, mapDispatchToProps)(Main)

顺便说一句,通常来说,您不需要bindActionCreators ..通常返回一个对象就足够了,例如:

const mapDispatchToProps = {
  someActionName,
  someOtherAction,
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM