Question

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

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

Reducer（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 根据要求使用Form组件：

index.js：

const store = configureStore();

render(
  <ReduxProvider store={store}>
    <Router>
      <App />
    </Router>
  </ReduxProvider>,
  document.getElementById("app")
);

App.js：

function App() {
  return (
    <div>
      <Switch>
        <Route path="/login" component={LoginPage} />
      </Switch>
    </div>
  );
}

LoginPage.js：

const LoginPage = () => (
  <div>
     <LoginForm />
  </div>
);

export default LoginPage;

configureStore.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()))
  );
}

rootReducer：

const rootReducer = combineReducers({
  reducer: reducer
});

export default rootReducer;

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

Answer 1

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

Answer 2

在 form.js 文件中：你能尝试使用这个吗：

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

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

2 个答案: