![](/img/trans.png)
[英]React Redux Saga: Actions must be plain objects. Use custom middleware for async actions
[英]React-Redux-Saga: Actions must be plain objects. Use custom middleware for async actions
我正在嘗試在我的反應應用程序中使用 redux-saga,但我仍然有這個錯誤:
動作必須是普通對象。 使用自定義中間件進行異步操作。
錯誤是:
15 | changeText = event => {
> 16 | this.props.changeText(event.target.value);
17 | };
這是我的代碼:
應用程序.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);
索引.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"),
);
動作.js
export function changeText(value) {
return function(dispatch) {
dispatch({
type: "CHANGE_TEXT",
value,
});
};
}
更改TextReducer.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()]);
}
我會很高興得到所有幫助。 我與它斗爭了大約兩天,但仍然沒有解決方案。 我試圖查找,但仍然出現此錯誤。
改變你的行動。 它只能接收對象,不能調用函數:
動作.js
export function changeText(value) {
type: "CHANGE_TEXT",
payload: {text:value},
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.