Redux 状态不会根据输入而改变

Question

在学习了一些带有注册、登录和主页的 react redux 教程后，我开始制作一个 react 应用程序。我正在使用 redux 处理状态，当我在登录页面的输入字段中键入时，状态没有更新。

在常量.js中

export const USER_LOGGED_IN = 'USER_LOGGED_IN';

在actions.js中

import * as constants from './constants';

export const userLoggedIn = (text) => ({
  type: constants.USER_LOGGED_IN,
  payload: text
});

在 reducer.js 中

import * as actionName from "./constants";

const initialStateLoggedIn = {
  email: "",
};

export const userLoggedInReducer = ( state = initialStateLoggedIn, action = {} ) => {
  switch (action.type) {
    case actionName.USER_LOGGED_IN:
      return {
        ...state,
        email: action.payload,
      };
    default:
      return state;
  }
};

在 index.js 中

import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import { userLoggedInReducer } from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";

const logger = createLogger();

const rootReducers = combineReducers({ userLoggedInReducer });

const store = createStore(
  rootReducers,
  composeWithDevTools(applyMiddleware(thunkMiddleware, logger))
);

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

在 SignIn.js 中

import { connect } from "react-redux";
import { userLoggedIn } from "./../../actions";

const mapStateToProps = state => {
  console.log(`mapStateToProps: ${state.userLoggedInReducer.email}`); //I think this is where it reads the input real time?
  return { email: state.userLoggedInReducer.email };
};

const mapDispatchToProps = dispatch => {
  return {
    onEmailFilled: event =>
      dispatch(userLoggedIn(event.target.signin_email.value))
  };
};

  render() {
    const { email, onEmailFilled } = this.props;
    console.log(`Hello ${email}`);
    return{
      <form ......
         <InputComponent
            id_name="signin_email" //this is the name attribute
            input_label="Email"
            input_type="email"
            function="{onEmailFilled}" //can I pass onEmailFilled like this?
        />
    .......
    export default connect( mapStateToProps, mapDispatchToProps)(SignIn);
}

在 InputComponent.js 中

import React, { Component } from "react";

class InputComponent extends Component {
  render() {
    return (
      <div className="measure mt4 mt4-1 mt4-m mt4-ns">
        <label htmlFor={this.props.id_name} className="f6 b db mb2">
          {this.props.input_label}
          {this.props.isOptional ? (
            <span className="normal black-60">(optional)</span>
          ) : null}
        </label>
        <input
          id={this.props.id_name}
          name={this.props.id_name}
          className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
          type={this.props.input_type}
          autoComplete="on"
          onChange={this.props.function} //passed from SignIn.js
        />

      </div>
    );
  }
}

export default InputComponent;

我有 redux chrome 扩展，我知道我应该去那里调试而不是使用 console.log，但我最终会随着我的进步而学习。在 mapStateToProps 和 render() console.log 中，当我输入输入元素时，它们没有返回任何内容。

我错过了什么导致此应用未更改状态？一些解释会很好，这样我就可以更多地理解 react redux。谢谢。

Answer 1

在 SignIn.js 中

  render() {
    const { email, onEmailFilled } = this.props;
    console.log(`Hello ${email}`);
    return{
      <form ......
         <InputComponent
            id_name="signin_email" //this is the name attribute
            input_label="Email"
            input_type="email"
            emailFilled={onEmailFilled} 
        />
    .......

在 InputComponent.js 中

<input
  id={this.props.id_name}
  name={this.props.id_name}
  className="input-reset ba b--black-20 pa2 mb2 db w-100 lh-copy lh-copy-l lh-copy-m lh-copy-ns"
  type={this.props.input_type}
  autoComplete="on"
  onChange={this.props.emailFilled}

我设法通过进行一些小改动来解决它。 Redux 扩展也显示了更新。解决了。​​