[英]Aplication works but generates an error: mapDispatchToProps() in Connect(App) must return a plain object. Instead received undefined
I have written small app with Redux/Thunk. 我已经用Redux / Thunk编写了小型应用程序。 It works but it also generates an error msg as in title.
它可以工作,但也会产生错误的味精,如标题中所示。 By work and not work here I mean receiving content from external file and make it available to app
通过工作而不是在这里工作是指从外部文件接收内容并将其提供给应用程序
I have tried to rewrite critical fragment to syntax probably more correct, but then it stopped working. 我试图将关键片段重写为可能更正确的语法,但随后它停止工作。 By work and not work here I mean receiving content from external file and make it available to application.
通过工作而不是在这里工作,是指从外部文件接收内容并将其提供给应用程序。 The very general idea is that when App.js (React/Hooks) is mounted it dispatches Thunk action of getting data from external source.
非常笼统的想法是,在安装App.js(React / Hooks)时,它会调度Thunk动作,以从外部源获取数据。
Here is shortened version of index.js 这是index.js的简化版本
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import {reducer} from './reducer';
const store = createStore(reducer, applyMiddleware(thunk) );
ReactDOM.render(<Provider store={store}><ConnectedApp /></Provider>, document.getElementById('root'));
Here below part of actions.js 在actions.js的下面
export function getData() {
return dispatch => {
// set state to "loading"
dispatch(getDataRequested());
fetch("https://api.myjson.com/bins/8qjek")
.then(response => response.json())
.then(data => {
// set state for success
const dane = data.map(Object.values);
dispatch(getDataDone(dane));
})
.catch(error => {
// set state for error
dispatch(getDataFailed(error));
})
}
}
and of App.js 和App.js
useEffect(() => getData(), []);
const {state} ={...props}
const mapStateToProps = (state) => {
return {state};
};
const mapDispatchToProps = getData;
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
export default ConnectedApp;
I have checked two other versions of mapDispatchToProps, but while probably syntactically correct, I do not receive content. 我已经检查了mapDispatchToProps的其他两个版本,但是在语法上可能正确,但是我没有收到内容。
const mapDispatchToProps = (dispatch) => {
return {
getData: () => getData()
}
};
and 和
const mapDispatchToProps = {getData: getData()}
Could someone help me? 有人可以帮我吗? That is shortened version, I can of course add any code necessary.
那是缩短的版本,我当然可以添加任何必要的代码。
You have to use bindActionCreators
from the redux
library. 您必须使用
redux
库中的bindActionCreators
。
Like so: 像这样:
import { bindActionCreators } from 'redux';
const mapDispatchToProps = dispatch =>
bindActionCreators(ActionCreators, dispatch);
Where ActionCreators
could be your getData
. ActionCreators
可以作为您的getData
。
Try adding dispatch
call before calling action creator getData()
. 尝试在调用操作创建者
getData()
之前adding dispatch
调用。
const mapDispatchToProps = (dispatch) => {
return {
getData: () => dispatch(getData())
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.