[英]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.