采用reactjs 开发时，redux 和 react-route 是怎么配合使用的

Posted 2023-04-12

参考技术A react-route是用来设置路由的，redux是用来发送请求的

当reducer在我的功能组件reactjs中出错时，我想清除或初始状态

【中文标题】当reducer在我的功能组件reactjs中出错时，我想清除或初始状态

【英文标题】：I want to clear or initial state when reducer get error in my functional component reactjs

【发布时间】：2021-04-04 08:27:11

【问题描述】：

你好 reactjs 开发者。 我开发了一个认证系统。当用户提交用户名和密码时，状态更改和加载微调器将呈现并且 redux 操作将触发。如果身份验证失败，则将数据传递给减速器和登录功能组件清除状态或设置初始状态。但我不明白如何清除或设置初始状态。请看我的截图。我正在使用 redux 和功能组件。

Login page Login controller Login form Redux action Redux reducer After submit login loading spinner load

【问题讨论】：

如果身份验证失败，则将数据传递给减速器和登录功能组件的操作清除状态或设置初始状态。这部分我看不懂

我想在提交失败并且加载微调器也发生变化时清除状态。请查看所有截图。你会一步一步找到的。@tay ferozi 感谢您的评论

【参考方案1】：

如果您询问redux state（即isAuthenticate、user 和error），您可以dispatch 一个新的action 和reducer 中的action，设置new state 是初始状态。

但是

如果您担心重置组件的状态（即name、password、error、submitText、isLoader 和count），您可以这样做 在Login 组件中定义一个新函数（例如resetState），当你执行dispatch(login(user)) 时，你可以像这样传递一个回调：dispatch(login(user, resetState))。并在行动内部

export const login = (user, cb) => 
    if() 
        
     else 
        cb()
    

请在你的下一个问题中复制并粘贴代码，让它更容易

【讨论】：

当我使用上面的代码Actions must be plain objects. Use custom middleware for async actions.会出现登录组件 const submitClickHandler = event => event.preventDefault(); setUser( ...user, isLoader: true, submitText: 'Sending...' );调度（登录（用户，resetState））； const resetState = async () => console.log('Action fire from redux action'); 动作 export const login = (user,cb) => if() else return cb();

如果你想在动作中执行异步任务，你必须为此安装 redux-thunk 并稍微更改语法

像这样：export const login = (user, cb) => (dispatch) => axios .get("/foo") .then((res) => dispatch(type: Types.SET_USER, payload); ) .catch((err) => if (err.response) dispatch(type: Types.SET_USER, payload); ); ;

在哪里以及如何使用cb回调函数。

cb 是您将传递给动作调度函数login in this case 的回调函数。当您的操作已被调度并且决定了用户在哪里登录或不登录时，您将调用此cb 函数，然后您可以调用cb 并做任何您想做的事情。在这种情况下，您将在组件内部定义cb，在此函数的定义中，您将清除状态并使用调度将此cb 传递给login，并在if 或else 块内调用cb 简单地清除 states