Reactjs redux中的加载流和错误状态

我正在构建一个简单的搜索表单，它会在提交表单后显示一个加载屏幕，并根据获取的结果显示错误

是否有一种标准模式，用于在从api进行搜索/获取等操作时触发加载和错误状态

我这样做似乎有些过头了——如果我有更多的减缩器，我就必须在每个减缩器中复制相同的逻辑来清除加载状态

class Search extends Component {
    onSubmit = e => {
        e.preventDefault();
        const { search } = this.props;
        search();
    }

    render() {
        const { error, loading } = this.props;
        return() {
            <>
                <form onSubmit={this.onSubmit}>
                    <input type="submit" value="search" />
                </form>
                {loading && <Loader />}
                {error && <p>{error}</p>}
            </>
        }
    }
}

const mapStateToProps = state => ({
    error: state.error,
    loading: state.loading
});

export default connect(mapStateToProps, {search})(Search);

用户还原器

const initialState = {
    error: '',
    loading: false,
    results: ''
};

export default function(state = initialState, action) {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                error: '',
                loading: true
            }

        case ERROR:
            return {
                ...state,
                loading: false,
                error: action.payload.message
            }

        case RECEIVE_RESULTS:
            return {
                ...state,
                loading: false,
                results: action.payload.items
            }

        default:
            return state;
        }
    }
}

---

在我看来，你处理这个问题的方式是完全正确的。这是我们通常通过在需要时更改redux存储中的加载值来实现的方法。尽管经常使用的命名约定是将其称为“isLoading”，而不是“loading”。

---

您是否发现当前实现中有任何问题需要解决？

正如Rishabh在回答中所说，这是解决问题的标准方法。它可能看起来有很多代码，但它是值得的，因为它是分离关注点的。您需要使用一些约定。通常，您不会分派{type:LOADING}，而是分派{type:SEARCH\u REQUEST}。至于其他两个动作，它们应该是SEARCH_SUCCESS和SEARCH_failure，这是您在表单下方的代码：{loading&&&}{error&&{error}

}应该在渲染中移动，然后返回，并在返回之前写入类似于：if loading{return}的内容，对于错误也是这样。正如您所知，react组件可以有1个返回，因此在加载时，它将显示加载程序，然后在加载内容时，它将呈现您的表单

const initialState = {
    error: '',
    loading: false,
    results: ''
};

export default function(state = initialState, action) {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                error: '',
                loading: true
            }

        case ERROR:
            return {
                ...state,
                loading: false,
                error: action.payload.message
            }

        case RECEIVE_RESULTS:
            return {
                ...state,
                loading: false,
                results: action.payload.items
            }

        default:
            return state;
        }
    }
}