首页 文章

使用自定义异步中间件进行调度 - Redux Thunk - 响应路由器

提问于
浏览
0

我'm trying to dispacth an async action with redux thunk. but my code isn'工作,控制台只是把我的错误 Error: Actions must be plain objects. Use custom middleware for async actions.

好吧,这是我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import 'babel-polyfill';
import ReduxThunk from 'redux-thunk';
import { createStore, combineReducers,applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import App, { reducer } from './AppContainer';
import {launchReducer} from './modules/Financeiro/Lancamentos/reducer/launchReducer';
import {Rotas} from './routes';

// Add the reducer to your store on the `routing` key
const store = createStore(
    combineReducers({
        app: reducer,
        routing: routerReducer,
        launch: launchReducer
    }),
    applyMiddleware(ReduxThunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store);

document.getElementById('app').style['min-height'] = '100vh';

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            {Rotas.map(rota => (
                <Route path={rota.path} component={App}>
                    <IndexRoute component={rota.component} />
                </Route>)
            )}
        </Router>
    </Provider>,
    document.getElementById('app') // eslint-disable-line comma-dangle
);

我的动作代码是这样的:

export const newLaunch = (obj) => async (dispatch) => {
    delete obj.idLaunch_headerOrigin
    let resp = await APIService('http://localhost:3000/launch/newLaunch', obj, 'POST')
    dispatch({type: SET_LAUNCH_HEADER_ORIGIN, payload: resp.response})
  }

在组件中我只是导入动作并从react-redux输入连接,我用“this.props.newLaunch(obj)”调用它

编辑:我的错误是在createStore,创建商店收到3个参数,我有一个错误的顺序将prelaoders放在enchances地方,我只是交换第二个到第三个参数的roder并且它完成了,我的最终代码是: const store = createStore( combineReducers({ app: reducer, routing: routerReducer, launch: launchReducer }), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(ReduxThunk), );

谢谢你的帮助,为坏英语而烦恼!

1 回答

  • 0

    您正在以错误的方式配置存储 . createStore接收3个参数(reducer,preloadedState,enhancer) . 因为您在代码中发送3,所以'applyMiddleware(ReduxThunk)'被视为preloadedState .

    检查此链接以了解在使用redux-thunk等增强器时如何配置redux-devtools:https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

相关问题