在React.js和Redux中过滤并返回所有存储的方法如下:
import { createStore } from 'redux';
// 定义初始状态
const initialState = {
data: [],
};
// 定义reducer函数
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_DATA':
return {
...state,
data: [...state.data, action.payload],
};
default:
return state;
}
};
// 创建store
const store = createStore(reducer);
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
const FilteredData = () => {
const [filter, setFilter] = useState('');
const data = useSelector((state) => state.data);
const filteredData = data.filter((item) =>
item.toLowerCase().includes(filter.toLowerCase())
);
return (
<div>
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
<ul>
{filteredData.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import FilteredData from './FilteredData';
const App = () => {
return (
<Provider store={store}>
<FilteredData />
</Provider>
);
};
export default App;
这样,你就可以在React.js和Redux中过滤并返回所有存储的数据了。用户可以通过输入框输入过滤条件,组件会根据条件过滤数据并展示在页面上。
注意:以上代码只是一个简单的示例,实际项目中可能需要根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云