React-Redux-Saga: Действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий - PullRequest
Новая
       10

React-Redux-Saga: Действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий

0 голосов
/ 23 января 2019

Я пытаюсь использовать redux-saga в своем приложении реакции, но у меня все еще есть эта ошибка:

Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.

Ошибка включена: 

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

Вот мой код:
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()]);
}

Я буду рад за любую помощь. Я борюсь с этим около двух дней и до сих пор не могу найти решение. Я попытался посмотреть, но у меня все еще есть эта ошибка.

1 Ответ

0 голосов
/ 23 января 2019

Измените свое действие. Может принимать только объекты, но не вызывать функцию:

actions.js 

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