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/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;

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

src/actions/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;

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();

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从'react redux'导入{Provider}；
从“redux”导入{createStore}；
导入“./index.css”；
从“./App”导入应用程序；
从“/Main”导入主窗口；
从“./reducers”导入用户状态；
将*作为serviceWorker从“/serviceWorker”导入；
变量路由=(
);
let store=createStore（userStatus）；
ReactDOM.render(
{Routes}
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

我在src/reducers/index.js中选中了

action.userName

和

action.isLogin

，它们的值是我在登录表单中输入的，但在src/components/login.js中，这些值是空的和false（初始状态）

---

如何正确更新这些状态？

看起来您没有提交表单。您需要一个函数（通常是handleSubmit）来提交表单。比如说：

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

---

您的

LOGIN

操作是否已调度？我想我是在src/container/LOGIN.js中的

mapDispatchToProps

函数中调度的。它错了吗？不，看起来不错，但是，您是否在Redux开发工具中检查过您的操作是否已实际调度？我想澄清一下，我不是在使用Redux，而是在使用useContext、useReducer模仿Redux，UseState还将进一步了解这一点，可能与您对对象的命名有关，因为调度中存在一些差异。谢谢您的回答。我在按钮上设置了

type=“submit”

，并为表单编写了

handleSubmit

函数。然后，将

this.props.onSubmit

函数移动到

handleSubmit

中，它就成功了！