我如何观察react组件中reducer的变化？答案

【问题标题】：How can I watch for changes from reducer in react component?我如何观察react组件中reducer的变化？
【发布时间】：2019-10-02 08:20:03
【问题描述】：

我有 react 应用程序，我正在使用 redux 作为商店。与 redux 一起，我正在使用 redux-thunk。例如，我有获取所有用户并将它们存储在用户减速器中的操作 getUsers。此外，如果在获取它们时出现一些错误，我会存储该错误。我的问题是如何在名为 UsersOverwiew 的组件中对减速器中发生的更改（例如错误）做出反应，并向用户显示该错误？我是用 useEffect 钩子做的，但有更好的方法吗？

用户缩减器

case GET_USERS_BEGIN:
        return {
            ...state,
            users: {
                loading: true,
                error: {},
                data: []
            }
        };
    case GET_USERS_SUCCESS:
        return {
            ...state,
            users: {
                loading: false,
                error: {},
                data: action.users
            }
        };
    case GET_USERS_FAILURE:
        return {
            ...state,
            users: {
                ...state.users,
                loading: false,
                error: action.error,
            }
        };

用户概览组件

// fetching users

useEffect(() =>{

    getUsers();

}, []);

// watch for changes in user reducer

useEffect(() =>{

    if(users.error){
        // if error happend do something
    }

}, [users]);

这只是代码的一小部分，我已经连接了所有东西，组件和reducer，但我想尽可能地简化它。

【问题讨论】：

标签： reactjs react-redux redux-thunk

【解决方案1】：

如果您使用的是功能组件，那么您的做法是正确的。上面的答案表明 componentWillMount() 需要基于类的组件。

但是用 useEffect 来做是完全没问题的。

【讨论】：