小编spu*_*nge的帖子

我在其他问题中看到了相互矛盾(或者只是让我感到困惑)关于getState在一个动作中使用是否可接受的答案,而且我已经看过很多次它被称为反模式.对我来说,它似乎工作得很好,但如果我们不使用它,最好的做法是什么getState？

我getState在一个thunk中使用来过滤当前连接到某些模拟数据并被拉入应用程序状态的用户数组.

这是我的行动代码:

export const accountLogInSuccess = user => ({
    type: types.ACCOUNT_LOG_IN_SUCCESS,
    user,
});

export const accountLogOutSuccess = () => ({
    type: types.ACCOUNT_LOG_OUT_SUCCESS,
});

export const accountCheckSuccess = () => ({
    type: types.ACCOUNT_CHECK_SUCCESS,
});

export const accountCheck = () => (
    (dispatch, getState) => {
        dispatch(ajaxCallBegin());
        return apiAccount.accountCheck().then((account) => {
            if (account) {
                const user = findByUID(getState().users, account.uid);
                dispatch(accountLogInSuccess(user));
                toastr.success(`Welcome ${user.nameFirst}!`);
            } else {
                dispatch(accountLogOutSuccess());
            }
            dispatch(accountCheckSuccess());
        }).catch((error) => {
            dispatch(ajaxCallError(error));
            toastr.error(error.message);
            throw (error); …

在下面的组件中,输入字段在输入字符后失去焦点.在使用Chrome的Inspector时,看起来整个表单正在重新呈现,而不是在输入时仅输入字段的value属性.

我从eslint和Chrome Inspector都没有错误.

提交表单本身的工作方式与实际输入字段的工作方式相同,当它位于渲染的返回中或作为单独的组件导入时,而不是如何在下面编码.

为什么会这样？

主页组件

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionPost from '../redux/action/actionPost';
import InputText from './form/InputText';
import InputSubmit from './form/InputSubmit';

class _PostSingle extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            post: {
                title: '',
            },
        };
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onChange(event) {
        this.setState({
            post: {
                title: event.target.value,
            },
        });
    }
    onSubmit(event) {
        event.preventDefault();
        this.props.actions.postCreate(this.state.post); …

我问这个是因为我想知道这个(下面)是否可行,如果是这样的话,我的页面应该如何正常工作呢？

<Router history={browserHistory}>
    <Route path="/" component={Root}>
        <IndexRoute component={Home} />
        <Route path="404" component={Empty} />
        <Route path="about" component={About} />
        <Route path="archive" component={Archive} />
        <Redirect from="*" to="/404" />
    </Route>
    <Route path="dashboard" component={_Dashboard}>
        <IndexRoute component={_Master} />
        <Route path="post" component={_Post} />
        <Redirect from="*" to="/dashboard" />
    </Route>
</Router>

是否可以让"/"和"仪表板"的路线成为彼此相同级别的孩子？

出于布局目的,我希望嵌套在"/"下的所有页面都使用Root组件的布局,而所有嵌套在"dashboard"下的页面都使用_Dashboard组件的布局.

更新(下面的解决方案)

使我上面的工作无法工作/可能的问题是由于我的根目录的Redirect所在的位置.以下Thomas Sojka的回答解决了我的问题.

这里(下面)是我目前所拥有的,正如我需要的那样(这次组件名称和路径略有不同,但总体思路和结构应足以显示解决方案).

<Router history={browserHistory}>
    <Route path="/" component={Root}>
        <IndexRoute component={Home} />
        <Route path="404" component={Empty} />
        <Route path="about" component={About} />
        <Route path="archive" component={Archive} />
    </Route>
    <Route path="dashboard" component={_Root}>
        <IndexRoute component={_Home} />
        <Route path="404" component={_Empty} />
        <Route …