在 React 组件中使用 async/await

Question

直接在 React 组件中使用 async/await 然后将结果存储在 store 中是一种好习惯吗？例如：

class User extends Component {

    render() {
        return <div>{this.props.user.name}</div>
    }

    componentWillMount() {
        this.getUser();
    }

    async getUser() {
        try {
            const user = await userAction.get();
            this.props.storeUser(user);
        } catch (err) {}
    }
}

const state2props = (state) => ({
    user: state.User.user
});

const dispatch2props = dispatch => ({
    storeUser: (user) => dispatch(userReducer.store(user)),
});

export default connect(state2props, dispatch2props)(User);

它似乎比经典的 react/redux 模式更灵活。

Answer 1

是的，您可以在 React 组件中使用 async/await。这不是一个坏习惯 这只是架构问题。

有很多方法可以在应用程序中实现异步逻辑。在小型应用程序中，您可以在反应组件中实现异步逻辑。当您的应用程序长大后，您会遇到一些问题，例如重复代码（例如，您想在多个 React 组件中获取用户）、代码组合和代码拆分。

您可以使用 redux-thunk https://github.com/gaearon/redux-thunk、redux-saga https://github.com/redux-saga/redux-saga、redux-logic https://github.com/jeffbski/redux-logic 或任何其他解决方案。

此外，您可以创建自己的自定义中间件，例如：

const reactions = {};

export const addReactions = signals => {
  reactions = { ...reactions, ...signals };
};

export default (signalMiddleware = ({ getState, dispatch }) => next => action => {
  if (!action.signal) {
    return next(action);
  }

  if (!reactions[action.signal]) {
    throw new Error(`There is no handler for ${action.signal} signal`);
  }

  reactions[action.signal]({ getState, dispatch, payload: action.payload });
});

这样的中间件允许您将业务逻辑实现到单独的层中。例如：

import { addReactions } from './path/to/signalMiddleware';

// Describe your Actions for middleware:
const fetchUser = (id) => ({
    signal: 'FETCH_USER',
    payload: id
});

const anotherAction = () => ({
    signal: 'SOME_ANOTHER_ACTION_WITH_USER',
});


// Describe your business logic using middleware:

addReactions({
    FETCH_USER: async ({dispatch}, {id}) => {
        const user = await fetcher.get(id);
        dispatch({
            type: 'RECEIVE_USER',
            payload: user,
        });
    },
    SOME_ANOTHER_ACTION_WITH_USER: () => {
       // do some awesone job :)
    }
}) 

所以我们的反应组件可能是：

class User extends Component {

    render() {
        return <div>{this.props.user.name}</div>
    }

    componentDidMount() {
       this.props.dispatch(fetchUser(123));
    }   
}

export default connect(state2props, dispatch2props)(User);

现在您可以将您的应用架构分为 3 层：

1) 视图——反应组件

2) 业务逻辑——你的中间件

3) 数据逻辑——你的 reducer

在视图和业务层之间，我们使用带有 signal 字段和不带 type 字段的特定操作。 在业务和数据逻辑之间，我们使用带有type 字段的操作。

这种架构允许您严格分离层。这种架构在大型应用程序中很有用。

在小型应用程序中，可以使用 redux-thunk 或在 react-components 中编写异步逻辑。