gpt4 book ai didi

javascript - Redux-thunk: `dispatch is not a function`

转载 作者:行者123 更新时间:2023-11-30 07:21:00 25 4
gpt4 key购买 nike

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

reducer

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;

登录用户.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);
},

商店.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;

enter image description here

最佳答案

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

连接(null,mapDispatchToProps)(主要)

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

const mapDispatchToProps = {
someActionName,
someOtherAction,
}

关于javascript - Redux-thunk: `dispatch is not a function`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44265007/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com