Question

我是Redux（以及React）的新手，所以这可能是一个非常基本的问题，但是我无法在Internet上找到直接的答案。

我的应用上有一个注册屏幕，我称为SignUp。它非常简单，只有三个输入（email，password和passwordCheck）和一个按钮（signup）。事实是，我想让我的用户生活尽可能简单，因此，passwordCheck更改后，我将其与password进行比较。如果它们匹配，signup设置为启用，如果不匹配，signup禁用，并向用户显示一条消息。当我只使用React时，事情非常简单-我只是做了一个this.state：

this.state: {
    // ... stuff
    password: "",
    passwordIsValid: false, //test password against a predicate function
    passwordMessage: "", //if the password is not valid there is a message
    passwordStyle: "", //if password is wrong i put some classes here
    passwordCheck: "",
    passwordCheckMessage: "", //the 'passwords do not match' message goes here
    passwordCheckStyle: "",
    passwordsMatch: false
}

然后我在SignUp中处理了应用程序的状态。现在，我也正在使用Redux，因此我杀死了this.state，将所有内容移至store，并开始使用reducer而不是处理程序。一切都适用于password，但是passwordCheck是另外一回事。由于我需要知道Store的password才能对照passwordCheck进行检查，因此我（到目前为止？）无法在passwordCheckReducer上进行此操作。相反，我从passwordCheckMessage中删除了passwordCheckStyle，passwordsMatch和passwordCheckReducer，并在SignUp上计算了这些值。在我看来，这是解决整个问题的非常错误和丑陋的方式。

因此，我想要一个更优雅，更像Redux的解决方案。

如果我可以将store放在passwordCheckReducer的{{1}}上，则可以在简化中设置state和其他变量，同时保持其纯净。不幸的是，我一直无法做到（到目前为止？）。因此，我想知道我想做的事情是否可行，或者还有其他更可取的方法来实现它。

OBS1：无论我在互联网上看什么，都可以找到有关初始化状态的Redux官方文档1。我不认为passwordsMatch是解决我的问题的方法，因为它用于使preloadedState无效，而不是使其在我的减速器上可用。相反，我只需要store可见store-即使是空的也是如此。 OBS2：我知道我可以将passwordCheckReducer作为store的键，但是由于reducer模式包含一个action参数，所以在state中定义这样的传递似乎对我来说是多余的

这是我的商店：

action

我正在使用// store.js import { applyMiddleware, createStore } from 'redux'; import { createLogger } from 'redux-logger'; import thunkMiddleare from 'redux-thunk'; import { Reducers } from '../reducers/reducers'; const logger = createLogger(); const middleware = applyMiddleware(thunkMiddleare, logger); export const Store = createStore(Reducers, middleware);：

combineReducers

这是// reducers.js import { combineReducers } from 'redux'; import { emailReducer } from './emailReducer'; import { passwordReducer } from './passwordReducer'; import { passwordCheckReducer } from './passwordCheckReducer'; export const Reducers = combineReducers({ emailChange: emailReducer, passwordChange: passwordReducer, passwordCheckChange: passwordCheckReducer });：

passwordCheckReducer

最后，这是// passwordCheckReducer.js import { CHANGE_PASSWORDCHECK } from '../actions/actionTypes'; const initialState = { passwordCheck: "" }; export const passwordCheckReducer = (state=initialState, action) => { const { payload, type } = action; switch(type) { case CHANGE_PASSWORDCHECK: const passwordCheck = payload; return { ...state, passwordCheck }; default: return state; } };的实现：

mapDispatchToProps

Answer 1

如果我没记错的话，当您将reducer传递给CombineReducers时，reduce将会收到redux模块状态（因此，initialState是什么，而不是整个应用程序的根状态对象）。您无权从其他reducer访问状态。

您有一些选择。

我认为分别为password和passwordCheck使用减速器有些过分。我会在整个表格中使用一个减速器：

const initialState = {
    password: '',
    passwordCheck: '',
    // ....
}

export const signupReducer = (state=initialState, action) => {
    const { payload, type } = action;

    switch(type) {
        case CHANGE_PASSWORD:
            return { ...state, password: action.password}
        case CHANGE_PASSWORDCHECK:
            const passwordCheck = payload;
            if (state.password != state.passwordCheck) 
                return { ...state, passwordCheck, error: "..."}; // or something like this

            return {
                ...state,
                passwordCheck
            };
        default: 
            return state;
    }
};

如果您想拆分所有内容，则始终可以定义化归器，并从父归化器调用它们，并传递整个父归化器状态。像这样：

import passwordReducer from './passwordReducer'
import passwordCheckReducer form './passwordCheckReducer'

export const signupReducer(state = initialState, action) => {
    state = passwordReducer(state, action)
    state = passwordCheckReducer(state, action)
    return state
}

Answer 2

如果要合并化简器，则只有一个存储对象可以存储每个化简器的所有状态。

因此您可以从一个组件访问多个reducer，如下所示：

const mapStateToProps = state => ({
  password: state.passwordChange.password,
  passwordCheck: state.passwordCheckChange.passwordCheck,
  passwordsMatch: state.passwordCheckChange.passwordsMatch
})
export default connect(mapStateToProps, mapDispatchToProps)(SignUp)

每次更新passwordCheck或password时，组件的道具都会更新。

所以最好的解决方案实际上是将passwordsMatch作为自定义道具从两个单独的reducer的状态派生而来。像这样：

const mapStateToProps = state => {
  const passwordsMatch = state.passwordChange.password === state.passwordCheckChange.passwordCheck
  return {
    password: state.passwordChange.password, 
    passwordCheck: state.passwordCheckChange.passwordCheck,
    passwordsMatch: passwordsMatch
  }
}

将“商店”设置为减速器的“状态”参数

2 个答案: