时间戳

首页 > 解决方案 > 无法使用 react-redux 更新状态

javascript - 无法使用 react-redux 更新状态

问题描述

我想做的事

我想在我的 React 应用程序中使用 Redux 管理两种状态。这两个状态是userName和isLogin哪个是布尔值，包含用户是否正在登录。

代码

我为初学者阅读了一些网页来编写代码。

src/components/Login.js

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleMainPage = this.handleMainPage.bind(this);
  }

  handleMainPage(){
    this.props.onSubmit(this.state.email);
  }
  handleEmail(event) {
    this.setState({email: event.target.value});
  }
  handlePassword(event) {
    this.setState({password: event.target.value});
  }


  render() {
    return (
      <Container component="main">
        <CssBaseline />
        <div>
          <Typography component="h1" variant="h5">
            Login
          </Typography>
          <form noValidate>
            <TextField value={this.state.email} onChange={this.handleEmail}/>
            <TextField value={this.state.password} onChange={this.handlePassword} type="password"/>
            <Button onClick={this.handleMainPage}>
              Sign In
            </Button>
          </form>
        </div>
      </Container>
    )
  }
}

export default Login;

src/容器/Login.js

import Login from '../components/Login';

import { connect } from 'react-redux';
import { login } from '../actions';

const mapStateToProps = (state, prop) => {
  return {
    userName: state.userName,
    isLogin: state.isLogin,
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSubmit: (username) => {
      dispatch(login(username))
    }
  }
};

let loginForm = connect(mapStateToProps, mapDispatchToProps)(Login);

export default loginForm;

src/reducers/index.js

const defaultState = {
  userName: "",
  isLogin: false,
};

const userStatus = (state=defaultState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return Object.assign({}, {
        userName: action.userName,
        isLogin: action.isLogin,
      });
    default:
      return state;
  }
}

export default userStatus;

src/actions/index.js

export const login = (username) => {
  return {
    type: 'LOGIN',
    userName: username,
    isLogin: true,
  };
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import './index.css';
import App from './App';
import MainWindow from './Main';
import userStatus from './reducers';
import * as serviceWorker from './serviceWorker';

var Routes = (
  <Route path='/' component={App}>
    <Route exact path='/' component={App} />
    <Route path='/login' component={App} />
    <Route path='/signup' component={App} />
    <Route path='/main' component={MainWindow} />
  </Route>
);

let store = createStore(userStatus);

ReactDOM.render(
  <Provider store={ store }>
    <Router>{Routes}</Router>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

我检查action.userName并action.isLogin在 src/reducers/index.js 中有我在登录表单中输入的值，但在 src/components/Login.js 这些值是空的和假的（初始状态）。

如何正确更新这些状态？

标签： javascriptreactjsreduxreact-redux

解决方案

看起来您没有提交表单。您需要一个函数（通常是 handleSubmit）来提交表单。所以是这样的：

<form onSubmit={handleSubmit}>
// ...
  <Button variant="contained" color="secondary" type="submit">
     Add note
  </Button>
</form>

你的 handleSubmit 函数看起来像 -->

const handleSubmit = e => {
// if your input value is truthy, then add input to state
    if (noteText) {
      dispatch({
        type: "ADD_NOTE",
        noteText,
        id: uuid(),
        dateCreated: Date()
      });
    }
    // set input value back to empty string
    setNoteText("");
    // don't let page refresh so your state is saved
    e.preventDefault();
  };

推荐阅读