React-Redux-Saga: Actions must be plain objects. Use custom middleware for async actions

Question

I'm trying to use redux-saga in my react app, but i still has this error:

Actions must be plain objects. Use custom middleware for async actions.

The error is on:

  15 |     changeText = event => {
> 16 |         this.props.changeText(event.target.value);
  17 |     };

Here is my code:
App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "./redux/actions";

import { initStore } from "./redux/store";

class App extends Component {
    changeText = event => {
        this.props.changeText(event.target.value);
    };

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>react-redux-saga</p>
                    <input type="text" onChange={e => this.changeText(e)} />
                    <hr />
                    <p>{this.props.changeTextReducer.text}</p>
                </header>
            </div>
        );
    }
}
const mapDispatchToProps = dispatch => {
    return {
        changeText: bindActionCreators(actions.changeText, dispatch),
    };
};
export default connect(
    ({ changeTextReducer }) => ({ changeTextReducer }),
    mapDispatchToProps,
)(App);

index.js

import changeTextReducer from "./redux/changeTextReducer";

import rootSaga from "./redux/sagas";

export const reducer = combineReducers({
    changeTextReducer,
});

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root"),
);

actions.js

export function changeText(value) {
    return function(dispatch) {
        dispatch({
            type: "CHANGE_TEXT",
            value,
        });
    };
}

changeTextReducer.js

const initialState = {
    text: "",
};

export default (state = initialState, action) => {
    switch (action.type) {
        case "CHANGE_TEXT":
            return {
                ...(state || {}),
                text: action.payload,
            };

        default:
            return state;
    }
};

sagas.js

import { put, takeEvery, all, call } from "redux-saga/effects";

export const delay = ms => new Promise(res => setTimeout(res, ms));

export function* helloSaga() {
    console.log("Hello Sagas!");
}

export function* changeTextAsync() {
    yield call(delay, 5000);
    yield put({ type: "CHANGE_TEXT", payload: "" });
}

export function* watchChangeTextAsync() {
    yield takeEvery("CHANGE_TEXT", changeTextAsync);
}

export default function* rootSaga() {
    yield all([helloSaga(), watchChangeTextAsync()]);
}

I'll be glad for all the help. I'm fighting with it for about two days and still doesn't have a solution. I tried to look up, but I still have this error.

Answer 1

Change your action. It can receive only objects, not call a function:

actions.js

export function changeText(value) {
 type: "CHANGE_TEXT",
 payload: {text:value},
}