当将Redux Saga与React一起使用时,出现此错误..未捕获的TypeError:getPosts不是函数

时间:2019-05-28 21:11:17

标签: javascript reactjs redux redux-saga dispatch

尝试学习如何将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....

让错误理解是在说什么,它是在获取对象而不是函数,但不能真正确定我需要做些什么。

谢谢!

1 个答案:

答案 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优质文档。