javascript - React Redux Saga:动作必须是普通对象。使用自定义中间件进行异步操作
问题描述
我花了这么多时间,仍然不知道发生了什么,我正在开发一个反应应用程序以将发布请求发送到 api,每次单击添加按钮以调度操作时,我都会收到错误“动作必须是普通对象”
这是actions/index.js
import { createAction } from "redux-actions";
import * as actions from "../actionTypes
export const CreateUserRequest = createAction(actions.CREATE_USER_REQUEST);
export const CreateUserSuccess = createAction(actions.CREATE_USER_SUCCESS);
export const CreateUserError = createAction(actions.CREATE_USER_ERROR);
actionTypes/index.js
export const CREATE_USER_REQUEST = "CREATE_USER_REQUEST";
export const CREATE_USER_SUCCESS = "CREATE_USER_SUCCESS";
export const CREATE_USER_ERROR = "CREATE_USER_ERROR";
减速器/createUser.js
import * as actions from "../actionTypes";
const initialState = {
isLoading: false,
isSuccess: false,
isError: false
};
const createUser = (state = initialState, action) => {
switch (action.type) {
case actions.CREATE_USER_REQUEST:
return {
...state,
isLoading: true,
isSuccess: false,
isError: false
};
case actions.CREATE_USER_SUCCESS:
return {
...state,
isLoading: false,
isSuccess: true,
isError: false,
result: action.payload,
};
case actions.CREATE_USER_ERROR:
return {
...state,
isLoading: false,
isSuccess: false,
isError: true,
result: action.payload,
};
default:
return state;
}
};
export default createUser;
减速器/index.js
import { combineReducers } from "redux";
import CreateUserReducer from './createUser';
const rootReducer = combineReducers({
CreateUserStatus:CreateUserReducer,
//logout:logout,
})
export default rootReducer
传奇/createUser.js
import { call, put, takeLatest } from "redux-saga/effects";
import { CreateUserSuccess, CreateUserError, CreateUserRequest } from '../actions/index';
import axiosCall from "../../services";
import * as actions from "../actionTypes"
export function* createUserRequest(action) {
try {
const response = yield call(
axiosCall,
"POST",
'/api/createUser',
action.payload,
);
if (response) {
yield put(CreateUserSuccess({ response : response.data}));
} else {
yield put(CreateUserError({ error: "Invalid details" }));
}
} catch (error) {
console.log('errrrrrrrrr::',error)
yield put(CreateUserError({ error: "Invalid detailssssssss" }));
}
yield takeLatest(actions.CREATE__USER_REQUEST, CreateUserRequest);
}
传奇/index.js
import { fork, all } from "redux-saga/effects";
import {createUserRequest} from './createUser';
function* rootSaga() {
{
yield all([
fork(createUserRequest),
]);
}
}
export default rootSaga;
store.js
import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "../reducers";
import rootSaga from "../saga/index";
import { createLogger } from "redux-logger";
const middleWares = [];
import { composeWithDevTools } from "redux-devtools-extension";
const logger = createLogger({
predicate: () => process.env.NODE_ENV === 'development',
collapsed: true
});
const sagaMiddleware = createSagaMiddleware();
middleWares.push(sagaMiddleware);
middleWares.push(logger);
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middleWares)));
sagaMiddleware.run(rootSaga);
export default store;
组件 createUser.js
import React, { useState} from 'react';
import { useDispatch } from "react-redux"
import {
Container,
} from '../../components';
import { createUserRequest } from '../../redux/actions';
const createUser = () => {
const dispatch = useDispatch()
const [newuser,setNewuser] = useState({
first_name : 'Jon',
last_name : 'Doe',
email : 'jondoe@gmail.com',
phone_number: '+91234455',
status:0
})
const handleChange = (e) =>{
setNewuser({...newuser,[e.target.name] : e.target.value});
}
//Add new user
const add_user = ()=>{
dispatch(createUserRequest(newuser));
}
return (
<Container>
<form>
<input type="text" className="form-control" name="first_name" onChange={handleChange}/>
<input type="text" className="form-control" name="last_name" onChange={handleChange}/>
<input type="text" className="form-control" name="email" onChange={handleChange}/>
<input type="text" className="form-control" name="phone_number" onChange={handleChange}/>
<input type="button" className="form-control" onClick={()=>{add_user()}}/>
</form>
</Container>
)
}
export default createUsers;
我现在收到的错误消息
Uncaught TypeError: Object(...) is not a function
at add_user (createusers.js?2170:55)
at onClick (createusers.js?2170:82)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
at invokeGuardedCallback (react-dom.development.js?61bb:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:306)
at executeDispatch (react-dom.development.js?61bb:389)
at executeDispatchesInOrder (react-dom.development.js?61bb:414)
at executeDispatchesAndRelease (react-dom.development.js?61bb:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:3287)
它指出了这条线
dispatch(createUserRequest(newuser));
解决方案
问题
您似乎正在尝试调度您的 saga 函数,createUserRequest
.
import { createUserRequest } from '../../redux/saga/createUser';
...
//Add new user
const add_user = () => {
dispatch(createUserRequest({ newuser: newuser }));
}
解决方案
您需要创建一个接受“新用户”有效负载的操作。也许您打算使用CreateUserRequest
.
import { createAction } from "redux-actions";
import * as actions from "../actionTypes;
export const CreateUserRequest = createAction(actions.CREATE_USER_REQUEST); // <-- ***
export const CreateUserSuccess = createAction(actions.CREATE_USER_SUCCESS);
export const CreateUserError = createAction(actions.CREATE_USER_ERROR);
所以在createUser
组件中。
import React, { useState } from 'react';
import { useDispatch } from "react-redux";
import { Container } from '../../components';
import { CreateUserRequest } from '../../redux/actions';
const createUser = () => {
const dispatch = useDispatch()
const [newuser, setNewuser] = useState({
first_name : '',
last_name : '',
email : '',
phone_number: '',
status:0
});
...
//Add new user
const add_user = () => {
dispatch(CreateUserRequest({ newuser })); // <-- dispatch action payload
}
return (
...
)
}
推荐阅读
- excel - 如何将第二个匹配条件添加到索引(b:b,match(c2,a:a,0))
- github - 使用 git 命令将文件夹从本地推送到 git 时出错
- php - 我如何从这个 $_POST 结果中获取关联数组
- android - 基于主开关的灰色设置?
- ios - 为什么 App Store 在刷新应用程序时返回不同(旧)收据 - 在沙盒中测试?
- here-api - Routing api中房车,露营车,大篷车的等效运输方式是什么?
- php - SELECT 命令的 phpMyAdmin DATE 变量 - 致命错误:未捕获的 ArgumentCountError
- css - 在 CSS 中更改图像的不透明度
- flutter - 防止 BoxShadow 被父级裁剪
- css - CSS Media 查询在浏览器中放大时行为异常,但在重新调整窗口大小时不会