react redux中如何访问其他reducer中reducer的状态答案

【问题标题】：How to Access the State of the reducer in other reducer in reat reduxreact redux中如何访问其他reducer中reducer的状态
【发布时间】：2017-12-31 09:41:48
【问题描述】：

我有一个登录页面组件，当我单击登录按钮时，我有一个名为 isUserAuthenticated 的布尔状态，该按钮检查用户列表，无论用户是否存在。用户列表在 signupreducer 中，我如何访问 loginreducer 中的用户列表并从中返回 isUserAuthenticated 标志。

登录页面组件

export const mapStateToProps = (state) => {
    return {
        isUserAuthenticated: state.reducer.isAuthenticated.isUserAuthenticated,
        users: state.SignupReducer.users
    }
}

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (credentials) => dispatch({ type: 'CHECK_LOGIN', credentials })
    }
};

LoginPage = connect(mapStateToProps, mapDispatchToProps)(LoginPage);

export default LoginPage;

登录缩减器

const initialStateAuth = {
    isUserAuthenticated: false
};

export const isAuthenticated = (state = initialStateAuth, action) => {
    switch (action.type) {
        case 'CHECK_LOGIN':
            return Object.assign({}, state, { isUserAuthenticated: checkLogin(state, action) })
        default:
            return state;
    }
}

这里其实我想签入用户 singupReducer.users 我如何访问这里....

const checkLogin = (state, action) => {
    let isExist = false;
    signupReducer.users.map((each) => {
        if (each.userName === action.credentials.username && each.password === action.credentials.password) {
            isExist = true;
        }
    });
    return state.isUserAuthenticated = false;

}

【问题讨论】：

您的拼写似乎有问题。有时你使用singupReducer 或SignupReducer。
@DamienGold 什么，但我只在一个地方使用过，这不是我刚刚提到的“signupReducer”。我的问题是如何访问特定减速器中的其他减速器状态。谢谢

标签： reactjs redux react-redux

【解决方案1】：

我假设您使用combineReducers 来设置您的状态树。您需要编写一个自定义组合函数，将您需要的状态（从注册）传递给登录减速器。

redux 文档中有一个如何执行此操作的示例：http://redux.js.org/docs/recipes/reducers/BeyondCombineReducers.html#sharing-data-between-slice-reducers

【讨论】：

【解决方案2】：

如果您不想在 reducer 之间共享数据，还有另一种方法。为此，您使用getState 并在发送给需要它的reducer 的操作中包含您需要的状态。这是一个例子：Alternative to sharing data between slice reducers

function someSpecialActionCreator() {
    return (dispatch, getState) => {
        const state = getState();
        const dataFromB = selectImportantDataFromB(state);

        dispatch({
            type : "SOME_SPECIAL_ACTION",
            payload : {
                dataFromB
            }
        });
    }
}

【讨论】：

有没有什么方法可以做到这一点而无需编写任何自定义函数
不写任何自定义函数？否 :( 你至少需要mapDispatchToProps、connect 你的组件、actionCreators 和reducer 来处理状态更新..

【解决方案3】：

我做了这样，我现在可以访问并且它正在工作，任何人都建议我这样做是正确的。

export const mapStateToProps = (state) => {
    return {
        isUserAuthenticated: state.reducer.isAuthenticated.isUserAuthenticated,
        users: state.SignupReducer.users
    }
}

在这里，我在 mapStateToProps 中选择了另一个减速器状态，然后在我的点击事件中准备了一个类，就像这样

onLogin = () => {
        var credentials = {
            username: this.userName,
            password: this.password
        }
        var loginFormData ={
            credentials:credentials,
            users:this.props.users
        }
        this.props.checkLogin(loginFormData);
    }

最后我用登录表单的凭据和其他减速器的状态来发送我的操作

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (loginFormData) => dispatch({ type: 'CHECK_LOGIN', loginFormData })
    }
};

【讨论】：