Question

所以，我已经搜索了这个问题的解决方案，并且没有找到答案。任何密切相关的问题最终都会通过修复状态突变问题来解决问题。此外，我之前做过类似的事情已经好几次了，并且回过头来看这些项目的代码与我在这里做的事情没有显着差异。

我有一个小的React应用程序，随着时间的推移会越来越大，所以我使用Redux进行状态管理。目前我有一个主要的App组件，最终将成为我的路由的父级，但是现在我只有一个组件，它将是一个Login页面。当我点击“登录”页面中的showCreateAccountFlyout时，我想要完成的当前事情只是将false的值从true更改为ButtonPseudoAnchor。

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

/* ---- Routes ----- */
import Login from './scenes/Login';

/* ----- Redux Store ----- */
import store from './redux/configureStore';

/* ----- Styles ----- */
import reset from './globalStyles/reset.scss';

export default class App extends React.Component<void> {  
  render() {
    return (
      <Provider store={store}>
        <Login />
      </Provider>
    )
  }
}

Login.js

import React from 'react';
import { Link } from 'react-router-dom';

import ButtonBasic from '../components/buttons/ButtonBasic';
import ButtonRow from '../components/buttons/ButtonRow';
import ButtonPseudoAnchor from '../components/buttons/ButtonPseudoAnchor';
import FlyoutFullScreen from '../components/containers/FlyoutFullScreen';
import FormElementBasic from '../components/formElements/FormElementBasic';
import PageBasic from '../components/containers/PageBasic';

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

/* ----- Styles ----- */
import loginStyles from './loginStyles.scss';


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

    this.onClickHandler = this.onClickHandler.bind(this);
  }

  onClickHandler() {
this.props.toggleCreateAccountFlyoutHandler(!this.props.showCreateAccountFlyout);
  }

  render() {
    return (
      <PageBasic contextualModifier="loginPage">
        <div className={loginStyles.loginContainer}>
          <div className={loginStyles.baphometLogo}>baphomet</div>
          <FormElementBasic
            type="text"
            placeholderText="Username or Email"
          />
          <FormElementBasic
            type="password"
            placeholderText="Password"
          />
          <ButtonRow rowAlignment="center">
            <ButtonBasic
              buttonText="Enter"
              buttonType="primary"
            />
          </ButtonRow>
          <ButtonPseudoAnchor onClickFunc={this.onClickHandler}>Create Account</ButtonPseudoAnchor>
        </div>
        <FlyoutFullScreen showFlyout={this.props.showCreateAccountFlyout} />
      </PageBasic>
    );
  }
}

const mapStateToProps = state => {
  return {
    showCreateAccountFlyout: state.loginReducer.showCreateAccountFlyout
  }
};

const mapDispatchToProps = dispatch => {
  return {
    toggleCreateAccountFlyoutHandler: showCreateAccountFlyout =>
      dispatch(toggleCreateAccountFlyout(showCreateAccountFlyout))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

loginActions.js

export const TOGGLE_CREATE_ACCOUNT_FLYOUT = 'TOGGLE_CREATE_ACCOUNT_FLYOUT';

export function toggleCreateAccountFlyout(showCreateAccountFlyout) {
  return {
    type: TOGGLE_CREATE_ACCOUNT_FLYOUT,
    payload: showCreateAccountFlyout
  }
}

loginReducer.js

import { TOGGLE_CREATE_ACCOUNT_FLYOUT } from '../actions/loginActions';

export default function loginReducer(state = {
  showCreateAccountFlyout: false
}, action) {
  switch(action.type) {
    case TOGGLE_CREATE_ACCOUNT_FLYOUT:
      return { ...state, showCreateAccountFlyout: action.payload };
    default:
      return state;
  }
}

减速器/ index.js

import { combineReducers } from 'redux';

import loginReducer from './loginReducer';

const rootReducer = combineReducers({
  loginReducer
});

export default rootReducer;

configureStore.js

import { applyMiddleware, createStore } from 'redux';

import thunk from 'redux-thunk';

import rootReducer from './reducers';

const middleware: Function = applyMiddleware(thunk);

export default createStore(rootReducer, middleware);

当我逐步浏览所有内容时，新的showCreateAccountFlyout值将被传递，它似乎永远不会从reducer传递回Login组件。也许有一些超级简单的东西我不见了？我不知道。

状态未在React / Rudux应用程序中更新

0 个答案: