当reducer在我的功能组件reactjs中出错时,我想清除或初始状态
Posted
技术标签:
【中文标题】当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
以上是关于当reducer在我的功能组件reactjs中出错时,我想清除或初始状态的主要内容,如果未能解决你的问题,请参考以下文章
当状态数组中的任何值被修改时,ReactJS 组件状态不会更新
如何渲染存储在 redux reducer 中的 reactjs 组件?
如何在 ReactJS-输出 [object Object] 中的功能组件之间传递值?