reactjs - Redux returns error 'Actions must be plain objects. Use custom middleware for async actions.' even though middleware is defined -
i use redux-thunk redux async action, redux returns error: 'actions must plain objects. use custom middleware async actions.'
i not using webpack, instead of concatenating js files 1 file. aware issue may caused that, need solution without webpack, if possible.
here store definition
const pricingstore = redux.createstore( pricingreducer, redux.applymiddleware(window.reduxthunk.default) // using umd redux-thunk https://npmcdn.com/redux-thunk@2.0.1/dist/redux-thunk.min.js ); const {provider} = reactredux; $(document).ready(() => { const pricingcontainer = document.getelementbyid('containerpricing'); if (pricingcontainer) { parsepricingdata(); const render = () => { reactdom.render( <provider store={redux.createstore(pricingreducer)}> <pricing /> </provider>, pricingcontainer ); }; render(); pricingstore.subscribe(render); } });
here action
function uploadinvoices() { console.log('works here'); return function () { console.log('doesnt log msg'); return null; }; }
here call of action
const { connect } = reactredux; let fileupload = ({dispatch}) => { return ( <input type="file" name="image" multiple onchange={(e) => dispatch(uploadinvoices())} /> ); }; fileupload = connect()(fileupload);
please me solution
actions plain javascript objects. actions must have type property indicates type of action being performed. types should typically defined string constants. once app large enough, may want move them separate module.
this redux docs. seem issue fact action returning other object.
just clarify bit more. action supposed doing nothing more return object @ minimum has type property passed reducer. if want use thunk handle async flow, should happen before action called. flow more this. call redux thunk connected component, thunk dispatches action , passes payload may need. action return object , have no logic of own.
Comments
Post a Comment