时间戳

首页 > 解决方案 > 将 Redux Saga 与 React 一起使用时会出现此错误 .. Uncaught TypeError: getPosts is not a function

javascript - 将 Redux Saga 与 React 一起使用时会出现此错误 .. Uncaught TypeError: getPosts is not a function

问题描述

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

错误在说什么是有道理的，它正在获取对象而不是函数，但不确定我需要做什么才能使其工作。

谢谢！

标签： javascriptreactjsreduxredux-sagadispatch

解决方案

您当前拥有的代码实际上并未将 getPosts 操作分派给您的减速器。

将您的 mapDispatchToProps 更改为：

const mapDispatchToProps = dispatch => {
  getPosts: bindActionCreators(getPosts, dispatch)
}

您还需要：

import { bindActionCreators, Dispatch } from "redux"

还将您的 ButtonContainer 更改为：

const ButtonContainer = props => (
     <button onClick={() => props.getPosts()}>Get Posts</button>
)

更多关于调度的信息可以在这个好的文档中找到。

推荐阅读