把每个状态都传递给连接组件是否合适？

在React中，将每个状态传递给连接组件是完全合适的。连接组件通常是指使用React Redux库中的connect函数将组件连接到Redux存储，并将状态映射到组件的属性上。

以下是一个示例解决方案：

1. 首先，安装React Redux库： npm install react-redux

2. 创建一个Redux存储和状态管理的文件，通常称为store.js：

// store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer); // 创建Redux存储

export default store;

3. 创建一个reducer文件，用于管理应用程序的状态：

// reducers.js

const initialState = {
  // 初始状态
  count: 0,
  username: '',
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'SET_USERNAME':
      return {
        ...state,
        username: action.payload,
      };
    default:
      return state;
  }
};

export default rootReducer;

4. 创建一个连接组件，将状态映射到组件属性：

// MyComponent.js

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ count, username }) => {
  return (
    <div>
      <h1>Count: {count}</h1>
      <h1>Username: {username}</h1>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count: state.count,
    username: state.username,
  };
};

export default connect(mapStateToProps)(MyComponent);

在上述示例中，我们创建了一个名为MyComponent的连接组件，并使用connect函数将其连接到Redux存储。我们还定义了一个mapStateToProps函数，将Redux存储的状态映射到组件的属性上。

现在，我们可以在任何需要使用Redux存储中的状态的组件中使用MyComponent：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import MyComponent from './MyComponent';

ReactDOM.render(
  <Provider store={store}>
    <MyComponent />
  </Provider>,
  document.getElementById('root')
);

在上述示例中，我们使用Provider组件将Redux存储提供给应用程序中的所有组件。然后，我们在根组件中使用MyComponent，它可以访问Redux存储中的状态并渲染。

这就是如何将每个状态传递给连接组件的方法。这种方法的好处是可以使状态管理变得更加简单和可维护，同时也提供了更好的性能和可扩展性。