Question

我想创建一个名为HeaderControl的条件组件，如果用户是否已记录，它可以为应用程序生成一种Header类型。

这是我的Header.jsx：

import React from 'react';
import { connect } from 'react-redux';
import { isAuthenticated } from '../Login/reducers';
import ucaLogo from '../../assets/logo.gif';
import '../../styles/base.scss';

const mapStateToProps = state => ({
  isAuthenticated: isAuthenticated(state),
});

function HeaderNoLogin() {
  return <div className="header-div col-md-12">
      <img className="img-login-header" src={ucaLogo} alt="logo" />
      <div className="title-head-div">
        <p className="title-head">Not logged</p>
        <p className="title-head"> Not logged</p>
      </div>
    </div>;
}

function HeaderLogged() {
  return <div className="header-div col-md-12">
      <img className="img-login-header" src={ucaLogo} alt="" />
      <div className="title-head-div">
        <p className="title-head">Logged</p>
        <p className="title-head"> Logged</p>
      </div>
    </div>;
}

class HeaderControl extends React.Component {
  render() {
    const isLoggedIn = (props) => {
      if (this.props.isAuthenticated) {
        return true;
      }
      return false;
    };

    let button = null;
    if (isLoggedIn) {
      button = <HeaderLogged />;
    } else {
      button = <HeaderNoLogin />;
    }

    return (
      <div>
        {button}
      </div>
    );
  }
}

export default connect(mapStateToProps)(HeaderControl);

我的入口点（app.jsx）有一个像这样的商店的提供者：

const history = createHistory();
const store = configureStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <MuiThemeProvider>
        <Switch>
          <Route path="/login" component={Login} />
          <PrivateRoute path="/" component={Home} />
        </Switch>
      </MuiThemeProvider>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

我的问题是：

我在哪里以及如何使用redux商店检查用户是否进行身份验证？
我应该在哪里以及如何导入标题？我想我应该在app.jsx中导入它，但我不知道究竟在哪里。

很抱歉，如果这些都是愚蠢的问题，但这是我第一次将Reactjs与Redux一起使用。

感谢。

Answer 1

如果您的新手文档在react-router v4 https://reacttraining.com/react-router/web/guides/philosophy中有很好的示例。 index.js：

export const store = createStore(
  app,
  composeWithDevTools(applyMiddleware(thunk))
); //mandatory to use async in redux

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Router>
        <App />
      </Router>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

在app.js中：

const App = () => (
  <div>
    <HeaderControl /> // header will be always visible
    <MuiThemeProvider>
      <Switch>
        <Route path="/login" component={Login} />
        <PrivateRoute path="/" component={Home} />
      </Switch>
    </MuiThemeProvider>
  </div>
);
export default App;

使用redux处理异步逻辑并不直观，如果你是新的还原，你不应该从那开始。

reducers.js：

 import {LOGGED_IN, LOGGED_OUT} from '../actions/User'
const initialState = {
  logged: false
}
// reducer
function User (state = initialState, action) {
  switch (action.type) {
    case LOGGED_IN:
      return Object.assign({}, state, {logged: true}, action.payload)
    case LOGGED_OUT:
      return initialState
    default:
      return state
  }
}

export default User

您需要设置一个中间件来处理redux中的异步请求。这是一种更简单的方法。还有其他选项，如redux saga和redux-observable。在这个例子中，我使用redux-thunk。

我建议你查看middlweare上的redux文档 https://redux.js.org/docs/advanced/Middleware.html 和/或本课程关于udemy https://www.udemy.com/react-redux-tutorial/

export const checkLogin = payload => { 
  return dispatch =>
    xhr
      .post(/login , payload) // payload is json name and password
      .then(res => dispatch(LOGGED_IN))) // response is positive
      .cath(err => console.log(err)) 
}

您的checkLogin操作应该在login.js表单中使用

login.js

import checkLogin from action.js

class Login extends React.Component {
  render() {
    return (
      <form submit={checkLogin}>
        {" "}
        // this is pseudo code but i hope it's clear , you take data from your
        form and you you call cheklogin.
      </form>
    );
  }
}

所以逻辑非常简单：

在登录时，您可以调用操作checkLogin

请求将通过login + pass

开始给您服务器

请求结束登录缩减器时。

Reducer update state。

标题正在刷新。

带有Redux的ReactJS条件标头

1 个答案: