Question

我有react应用，我正在使用redux作为商店。与redux一起使用的是redux-thunk。例如，我有获取所有用户并将其存储在用户reducer中的动作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,
            }
        };

UserOverview组件

// fetching users

useEffect(() =>{

    getUsers();

}, []);

// watch for changes in user reducer

useEffect(() =>{

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

}, [users]);

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

Answer 1

如果您使用的是功能组件，则此操作正确无误。上述建议componentWillMount（）的答案需要基于类的组件。

但是使用useEffect完全可以。

如何观察React组件中reducer的变化？

1 个答案: