将`store`设置为reducer的` state`参数

Question

我是Redux（和React）的新手，所以这可能是一个非常具有问题的问题，但我无法通过互联网找到答案。

我的应用程序上有一个注册屏幕，我称之为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的state上，我将能够在减速器中设置passwordsMatch和其他同时保持它纯净。不幸的是，我一直无法做到（到目前为止？）。所以，我想知道我想做什么是可能的，还是有其他的，更多的desirables，方法去做。

OBS1：无论我在互联网上看到什么，我都找到了关于初始化state1主题的Redux官方文档。我不认为preloadedState是解决我的问题的方法，因为它被用来使用store，而不是让我的减速器可用。相反，我只需要有store - 即使是空的 - 可见passwordCheckReducer。 OBS2：我知道我可以将store作为action的关键，但由于reducer模式包含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的实现：

// SignUp.js
const mapDispatchToProps = dispatch => ({
    handleEmailChange: e => dispatch(updateEmail(e.target.value)),
    handlePasswordChange: e => dispatch(updatePassword(e.target.value)),
    handlePasswordCheckChange: e => dispatch(updatePasswordCheck(e.target.value))
});

Answer 1

如果我没记错的话，当你将reducer传递给combineReducers时，该reducer将收到redux模块状态（所以，initialState是什么，而不是整个app的根状态对象）。您无权访问其他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;
    }
};

如果要拆分，可以始终定义reducers，并从父reducer调用它们，传递整个parent-reducer状态。就像是：

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，则只有一个store对象存储来自每个reducer的所有状态。

因此，您可以从一个组件访问多个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的状态派生的自定义prop来处理。就像是：

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