尝试学习如何将Redux Sagas与React结合使用。整理一个简单的示例,但它对我不起作用。
我的App.js文件中的代码:
const sagaMiddleware = createSagaMiddleWare();
const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
动作创建者:
export const getPosts = () => {
return {
type: 'GET_POSTS'
}
};
减速器:
const combineReducers = (state= {}, action) => {
switch (action.type) {
case 'GET_POSTS':
return { ...state, loading: true};
default:
return state;
}
}
export default combineReducers;
我的Button组件,应将其称为onClick
const ButtonContainer = (getPosts) => (
<button onClick={() => getPosts()}>Get Posts</button>
)
const mapDispatchToProps = {
getPosts: getPosts
}
export default connect(null, mapDispatchToProps)(ButtonContainer);
问题是页面加载时出现此错误。
Uncaught TypeError: getPosts is not a function....
让错误理解是在说什么,它是在获取对象而不是函数,但不能真正确定我需要做些什么。
谢谢!
答案 0 :(得分:0)
您当前拥有的代码实际上并未将getPosts操作分派给您的reducer。
将mapDispatchToProps更改为:
const mapDispatchToProps = dispatch => {
getPosts: bindActionCreators(getPosts, dispatch)
}
您还需要:
import { bindActionCreators, Dispatch } from "redux"
还将您的ButtonContainer更改为:
const ButtonContainer = props => (
<button onClick={() => props.getPosts()}>Get Posts</button>
)
有关分发的更多信息,请参见this优质文档。