При использовании Redux Saga с React получите эту ошибку. Uncaught TypeError: getPosts не является функцией

Question

Попытка научиться использовать 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;

Компонент My 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....

Имеет смысл, что говорит ошибка: она получает объект вместо функции, но не совсем уверена, что мне нужно сделать, чтобы это работало.

Спасибо!

Answer 1

Код, который у вас есть, на самом деле не отправляет действие getPosts вашему редуктору.

Измените свою карту DisPatchToProps на:

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

Вам также понадобится:

import { bindActionCreators, Dispatch } from "redux"

Также измените ваш ButtonContainer на:

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

Более подробную информацию об отправке можно найти в этой хорошей документации.