尝试在react-redux中构建搜索过滤器

// 1. 安装必要的依赖
// npm install react react-redux redux

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// 2. 创建Redux store
const initialState = {
  filter: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_FILTER':
      return {
        ...state,
        filter: action.payload,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

// 3. 定义action类型
const SET_FILTER = 'SET_FILTER';

// 4. 创建action创建函数
const setFilter = (filter) => ({
  type: SET_FILTER,
  payload: filter,
});

// 6. 创建容器组件
const FilterContainer = ({ filter, setFilter }) => {
  const handleFilterChange = (event) => {
    setFilter(event.target.value);
  };

  return (
    <input
      type="text"
      value={filter}
      onChange={handleFilterChange}
      placeholder="Search..."
    />
  );
};

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

const mapDispatchToProps = {
  setFilter,
};

const ConnectedFilterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(FilterContainer);

// 7. 创建展示组件
const ItemList = ({ items, filter }) => {
  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <ul>
      {filteredItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

const mapStateToProps = (state) => ({
  filter: state.filter,
  items: ['Apple', 'Banana', 'Orange', 'Mango'],
});

const ConnectedItemList = connect(mapStateToProps)(ItemList);

// 8. 在应用程序中使用
const App = () => (
  <Provider store={store}>
    <div>
      <ConnectedFilterContainer />
      <ConnectedItemList />
    </div>
  </Provider>
);

export default App;