reactjs - 具有内部隔离 Redux 存储的可重用组件

Question

我正在考虑在 React 中构建一个非常复杂的图表组件，我希望它可以在许多不同的项目中重用。不用说，像这样的组件有多种状态需要以某种方式进行管理。

Redux 似乎非常适合这个，但是如果我只是将顶级容器包装在带有自定义存储的 Provider 中……如果包含该组件，组件的内部 redux 存储不会干扰全局应用程序状态在更大的 React/Redux 应用中？

import React, { Component } from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import internalReducer from './reducer';

export default class MyReduxComponent extends Component {

    render() {
        const store = createStore(internalReducer, this.props.initialState);
        return <Provider store={store}>
            <Chart />
        </Provider>
    }

}

Answer 1

您是否有理由不只使用 React 组件状态？ Redux 旨在用于需要由整个应用程序中的多个组件访问的状态。如果您管理的状态仅供特定组件的后代使用，那么您也可以只使用组件状态——在这种情况下不需要 Redux。您的组件将以这种方式更加可重用，并且不会依赖额外的依赖项。