在我们操纵状态之后，如何在Redux中返回以前的状态

Question

在操作状态后，我很难获得以前的状态。因此，我想添加一个功能，根据关键字输入按用户名搜索用户。我正在使用Redux Toolkit。

这是我现在的减速器：

searchByKeyword: (state, action) => {
state.users.results = state.users.results.filter((user) =>
user.login.username.startsWith(action.payload)
);
},

组件中的触发器：

useEffect(() => {
if (keyword) {
dispatch(searchByKeyword(keyword));
}   
}, [keyword, dispatch]);

如果关键字不为空""，它将调度searchByKeyword。然后，如果关键字为空""，我希望返回我以前的状态(在筛选之前)。

Answer 1

您可以通过复制存储中的状态来管理此场景：

...
initialState:{
user : {
results: [],
filteredResults:[],
}
}
...
...
searchByKeyword: (state, action) => {
state.users.filteredResults = state.users.results.filter((user) =>
user.login.username.startsWith(action.payload)
);
},

然后在您的React组件中：

{ keyword ? results.map(...) : filteredResults.map(...)}

另一种处理方法是，如果你不想在redux存储中有重复的状态，你可以把结果保存在存储中，并用useMemo:在react组件中本地管理过滤

const results = useSelector( state => state.user.results )
const [keyword, setKeyword] = useState("")
const displayResults = useMemo(() => 
keyword ? results.filter(// filtering ) : results
, [keyword])
return (
<>
{ displayResults.map(...) }
</>

选择在很大程度上取决于你如何构建你的应用程序。通常，如果可能的话，我更喜欢第二种方法，因为我尽量不污染全球商店。但是，如果您需要多个组件中的过滤值，第一个是最佳选择。

Answer 2

您可以选择将以前的状态保持在状态本身，或者利用某种形式的Redux中间件为您实现这一点。Redux没有提供任何开箱即用的东西来获得以前的状态。

Answer 3

您应该仅在搜索框组件上的onChange事件中处理此逻辑。

假设值为空，则不要执行任何操作-保留状态，否则，如果用户键入了某个值，则继续更新keyword状态变量。

正如@dreadwail在另一个回答中所说，Redux或React没有现成的解决方案。