React Redux将过滤器应用于支持的呼叫和路由

// 定义过滤器状态
const initialState = {
  filter: ''
};

// 创建过滤器组件
class FilterComponent extends React.Component {
  handleFilterChange = (event) => {
    const filter = event.target.value;
    this.props.setFilter(filter);
  };

  render() {
    return (
      <input
        type="text"
        value={this.props.filter}
        onChange={this.handleFilterChange}
      />
    );
  }
}

// 连接过滤器组件
const mapStateToProps = (state) => ({
  filter: state.filter
});

const mapDispatchToProps = (dispatch) => ({
  setFilter: (filter) => dispatch({ type: 'SET_FILTER', filter })
});

const ConnectedFilterComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(FilterComponent);

// 应用过滤器
class CallList extends React.Component {
  render() {
    const filteredCalls = this.props.calls.filter(call =>
      call.name.includes(this.props.filter)
    );

    return (
      <ul>
        {filteredCalls.map(call => (
          <li key={call.id}>{call.name}</li>
        ))}
      </ul>
    );
  }
}

const ConnectedCallList = connect(
  mapStateToProps
)(CallList);

// 在应用中使用过滤器
const App = () => (
  <div>
    <ConnectedFilterComponent />
    <ConnectedCallList calls={callsData} />
  </div>
);

// 渲染应用
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);