Question

我尝试编写以下代码。但是redux-thunk不起作用。你知道怎么解决吗？当我执行此代码时，它可以得到此错误。 createStore.js:113 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. 但我已经安装了redux-thunk。为什么会发生这种错误？

index.js

import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import thunk from 'redux-thunk';
import * as storage from './persistence/storage';
import randomToken from './utlis/random';
import * as reducers from './reducers';
import {
  App,
  Home
} from './components';

const reducer = combineReducers({
  ...reducers,
  routing: routerReducer
});

if (!storage.get('token')) {
  storage.put('token', randomToken());
}

const initialState = {
  application: {
    token: storage.get('token')
  }
};

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
);

const store = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(
      thunk
    ),
    DevTools.instrument()
  )
);
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={Home}/>
        </Route>
      </Router>
    </div>
  </Provider>,
  document.getElementById('app')
);

Map.js

import React from 'react';
import { connect } from 'react-redux';
import * as actions  from '../actions/cityForcast';

export class Home extends React.Component {
  constructor (props, context) {
    super(props, context);
  }

  componentWillMount () {
    this.props.dispatch(actions.search(this.props.token));
  }

  render() {
    return (
      <div>
        <button onClick={() => actions.search()}>Search</button>
      </div>
    );
  }
}

export default connect(({ application, cityForecast }) => ({ application, cityForecast }))(Home);enter code here

cityForcast.js

export function search(token) {
  return dispatch => {
    console.log(token);
  };
}

Answer 1

我可以为自己解决这个问题。我还需要安装redux-thunk作为devDependencies。

错误获取'未捕获错误：操作必须是普通对象。使用自定义中间件进行异步操作。通过redux-thunk

1 个答案: