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

我是 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 而不是 handlers。 一切都适用于password ，但passwordCheck是另一回事。 由于我需要知道 Store 的password以根据passwordCheck对其进行检查，因此我无法（到目前为止？）在passwordCheckReducer上执行此操作。 相反，我删除passwordCheckMessage ， passwordCheckStyle和passwordsMatch从passwordCheckReducer ，计算这个值SignUp 。 不过，在我看来，这是解决整件事的一种非常错误和丑陋的方式。

所以，相反，我想要一个更优雅、更像 Redux 的解决方案。

如果我可以让store处于passwordCheckReducer的state我将能够在减速器中设置passwordsMatch和其他人，同时保持它的纯净。 不幸的是，我一直无法做到（到目前为止？）。 所以，我想知道我想做的事情是否可行，或者是否有其他的、更可取的方法来做到这一点。

OBS1：无论我在 Internet 上的何处查找，都可以找到有关初始化状态主题的 Redux 官方文档。 不过，我不认为preloadedState是解决我的问题的方法，因为它用于初始化store ，而不是使其在我的减速器上可用。 相反，我只需要让store - 即使是空的 - 对passwordCheckReducer可见。 OBS2：我知道我可以将store作为 key of 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))
});

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

你有几个选择。

我认为为password和passwordCheck设置单独的 reducer 有点矫枉过正。 我会为整个表单使用一个减速器：

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
}

如果您正在组合减速器，则只有一个存储对象存储来自每个减速器的所有状态。

因此，您可以像这样从一个组件访问多个减速器：

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

每次更新passwordCheck或password ，组件的 props 都会更新。

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

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

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

问题描述

1楼

2楼