Use Custom Async middleware to dispatch - Redux Thunk - react Router

Question

i'm trying to dispacth an async action with redux thunk. but my code isn't work, the console just throw me the error Error: Actions must be plain objects. Use custom middleware for async actions.

well, this is my code:

    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
);

And my action code is like this:

  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})
  }

in the component I just import action and put in the connect from react-redux and i call it with "this.props.newLaunch(obj)"

EDIT: My error was in createStore, the create store recieves 3 arguments, and i had a mistaken in order putting the prelaoders in enchances place, i just trade the roder from 2nd to 3rd argument and it's done, my final code is: const store = createStore( combineReducers({ app: reducer, routing: routerReducer, launch: launchReducer }), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(ReduxThunk), );

thanks for help, sry for the bad english!

you have to add `Promise` support for your actions since your API returns a promise. [`redux-promise`](https://github.com/acdlite/redux-promise) should help you. — The Reason, Jan 02 '18 at 14:30
but redux-thunk suply this issue isn't? or the redux-promise has another functionality. in all my project i worken with only redux-thunk and it's all i needed to dispatch my async actions — Caíque Carbone Gonçalves, Jan 02 '18 at 14:35
I know the redux promise is to return a promise, and dispatch return a function! but in my action i'm using async/await to wait for a response and dispatching a certain property from response from API. — Caíque Carbone Gonçalves, Jan 02 '18 at 14:45

score 0 · Accepted Answer · answered Jan 02 '18 at 15:13

0

You are configuring the store in a wrong way. createStore receives 3 arguments (reducer, preloadedState, enhancer). Because you are sending 3 in your code the 'applyMiddleware(ReduxThunk)' is being taken as the preloadedState.

Check this link to see how to configure redux-devtools when you are using enhancer like redux-thunk: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

answered Jan 02 '18 at 15:13

Johnny Zabala

2,285
1
12
14

OMG! thanks a lot! i do not even notice that! thanks for reading my coide and precise answer – Caíque Carbone Gonçalves Jan 02 '18 at 16:12

Use Custom Async middleware to dispatch - Redux Thunk - react Router

1 Answers1