javascript - React Hooks 和 Redux - 从动作创建者那里获得价值的麻烦
问题描述
所以我正在做一个学习钩子的小项目,这有点噩梦:)
我有一个登录表单组件,它调用操作创建者进行登录,之后我想使用在此操作中已更改的值,例如。已登录。我可以看到商店中的值在 chrome react 开发工具中已更改,但在代码中不起作用。下面是代码示例。
减速器(reducer.js):
const initialState = {
user: {},
isFetching: false,
isLoggedIn: false,
error: false
};
export default function loginReducer(state = initialState, action) {
switch (action.type) {
case types.LOGIN_SUCCESS:
return {
...state,
isFetching: false,
isLoggedIn: true,
error: false,
user: action.user
};
default:
return state;
}
}
动作创建者 (actions.js)
export function loginToApi(credentials) {
return function(dispatch) {
axios
.post("https://localhost:44320/Login", {
email: credentials.email,
password: credentials.password
})
.then(response => {
dispatch(loginSuccess(response.data));
})
})
};
}
function loginSuccess(user) {
return { type: types.LOGIN_SUCCESS, user };
}
登录表单组件(form.js)
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import useForm from "./useForm";
import validate from "./LoginFormValidationRules";
import { loginToApi } from "../../redux/actions/loginActions";
import { connect } from "react-redux";
export function Form({ loginToApi, isLoggedIn }) {
// custom form hook
const { values, errors, handleChange, handleSubmit } = useForm(
{ accountType: "1", email: "", password: "" },
login,
validate
);
const [loginFailed, setLoginFailed] = useState(false);
function redirect() {
if (isLoggedIn) { // I want to use those variables here
return <Redirect to="/home" />;
}
}
function login() {
loginToApi(values);
}
return (
<div>
{redirect()}
// form, I want to use error variable here for valdiations as well
</div>
);
}
function mapStateToProps(state) {
console.log(state); // I can see change here
return {
user: state.user,
isLoggedIn: state.isLoggedIn,
error: state.error
};
}
const mapDispatchToProps = {
loginToApi
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Form);
所以我想在这个组件中使用 error 或 isLoggedIn 等值,但我不知道如何获取它们。我得到的只是未定义的。
帮助表示赞赏。
@edit 根据要求我对表单组件的使用:
index.js:
const store = configureStore();
render(
<ReduxProvider store={store}>
<Router>
<App />
</Router>
</ReduxProvider>,
document.getElementById("app")
);
应用程序.js:
function App() {
return (
<div>
<Switch>
<Route path="/login" component={LoginPage} />
</Switch>
</div>
);
}
登录页面.js:
const LoginPage = () => (
<div>
<LoginForm />
</div>
);
export default LoginPage;
配置商店.js:
export default function configureStore(initialState) {
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
return createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(thunk, reduxImmutableStateInvariant()))
);
}
根减速器:
const rootReducer = combineReducers({
reducer: reducer
});
export default rootReducer;
希望这可以帮助您看到问题,因为我仍然没有解决问题..谢谢!
解决方案
我相信您的登录表单组件(form.js),
mapStateToProps 函数中的值应该是这样的:
function mapStateToProps(state) {
console.log(state.reducer); // I can see change here
return {
user: state.reducer.user,
isLoggedIn: state.reducer.isLoggedIn,
error: state.reducer.error
};
}
推荐阅读
- java - 在 Spring-Boot 中从 websocket 接收数据时调用服务时遇到问题
- java - 我想将 MultipartFile 转换为所需的类型 byte[] 但出现错误
- sql - 带有 SELECT 语句的 SQL INSERT INTO
- bash - Azure Pipelines 的 YAML 文件中的 Echo 打印不同的内容
- mysql - Mysql参数化视图
- flutter - 如何根据 Flutter 中的条件更改底部导航栏项
- java - Atomikos 的 Axon 框架?它是如何工作的?
- c# - 将 .Net Framework 应用程序与 .Net Core 库混合使用
- android - 如何使用“R.id object = new R.id();” 使用构建工具 3.6.0?
- javascript - 在嵌套对象的情况下,如何从嵌套对象访问顶级对象的属性?