如何使用异步thunk和redux切片从Firebase登录正确返回用户对象？

huangapple
go评论116阅读模式
英文:

How do I properly return a user object from firebase sign using an async thunk and redux slice?

问题

在登录后，我想将用户对象返回给切片，但我一直收到关于不可序列化数据的错误，我该如何正确配置它？<br>

  1. export const updateProfileAsync = createAsyncThunk('user/updateProfile', async (user: any, profile: any) => {
  2.     const response = await updateProfile(user, profile);
  3.     return response.user;
  4. });

接口：

  1. interface userState {
  2.     user: User;
  3. }

在我的切片中：

  1. extraReducers: (builder) => {
  2.     builder.addCase(loginAsync.pending, (state, action) => {
  3.         console.log('pending');
  4.         state.loading = 'pending';
  5.     });
  6.     builder.addCase(loginAsync.fulfilled, (state, action) => {
  7.         state.loading = 'succeeded';
  8.         console.log('logged in');
  9.         console.log(action.payload);
  10.         state.loginError = '';
  11.     });
  12.     builder.addCase(loginAsync.rejected, (state, action) => {
  13.         state.loginError = action.error.message;
  14.         state.loading = 'failed';
  15.         console.log('failed');
  16.     });
  17. }

如何使用异步thunk和redux切片从Firebase登录正确返回用户对象？

英文:

After sign in, I wan to return the user object to the slice, but I keep getting an error, about non serializable data, how do I properly configure this ?<br>
如何使用异步thunk和redux切片从Firebase登录正确返回用户对象？

  1. export const updateProfileAsync = createAsyncThunk(&#39;user/updateProfile&#39;, async(user:any, 
  2. profile:any)=&gt;{
  3. const response = await  updateProfile(user,profile)
  5. return response.user
  6. })

interface

  1. interface userState {
  2. user:User 
  3. }

in my slice,

  1. extraReducers:(builder) =&gt; {
  2.     builder.addCase(loginAsync.pending, (state,action)=&gt;{
  3.         console.log(&#39;pending&#39;)
  4.         state.loading = &#39;pending&#39;
  5.     })
  6.     builder.addCase(loginAsync.fulfilled, (state,action)=&gt;{
  7.         state.loading = &#39;succeeded&#39;
  8.         console.log(&#39;logged in&#39;)
  9.         console.log(action.payload)
  10.         state.loginError = &#39;&#39;
  11.     })  
  12.     builder.addCase(loginAsync.rejected, (state,action)=&gt;{
  13.         state.loginError = action.error.message
  14.         state.loading = &#39;failed&#39;
  15.         console.log(&#39;failed&#39;)
  16.     })

答案1

得分: 1

你的 user.user 对象似乎不可序列化，但你返回给 slice 的数据应该是可序列化的。<br>

你可以在这里查看如何在 Redux 中处理不可序列化的数据。<br>

还可以参考与 React-Redux-Firebase 一起使用。

英文:

It seems that your object user.user is not aserializable, but data that you return to the slice should be aserializable.<br>

you can have a look here how to work with Non-Serializable data in Redux.<br>
see also Use with React-Redux-Firebase

huangapple
  • 本文由 发表于 2023年7月3日 08:45:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/76601296.html
  • firebase-authentication
  • javascript
  • reactjs
  • redux
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定