React Hooks 和 Redux - 难以从动作创建者那里获取价值

Question

所以我正在做一个小项目来学习钩子，这是一个小小的噩梦:)

我有一个登录表单组件，它调用操作创建者登录，之后我想使用在此操作中已更改的值，例如 isLoggedIn。我可以看到商店中的值已在 chrome react 开发工具中更改，但它在代码中不起作用。下面是代码示例。

减速器(减速器.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;
}
}

操作创建器(操作.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 };
}

登录表单组件(表单.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);

所以我想在这个组件中使用错误或 isLoggedIn 等值，但我不知道如何获取它们。我得到的只是未定义的。

感谢帮助。

@edit 根据要求，我对表单组件的使用：

索引.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;

希望这可以帮助您看到问题，因为我仍然没有解决问题.. 谢谢！

Answer 1

我相信您的登录表单组件(表单.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
};
}

Answer 2

在表单中.js文件： 你能试试这个吗：

function redirect() {
if (this.props.isLoggedIn || this.props.isLoggedIn.loginReducer.isLoggedIn) { 
return <Redirect to="/home" />;
}
}