React-redux工具包:将reducer作为道具传递给另一个函数时,无法设置新状态

cvxl0en2  于 2022-11-24  发布在  React
关注(0)|答案(1)|浏览(124)

我尝试使用react redux工具包和pass setter函数来设置firebase的'onAuthStateChanged'的新状态。计划是将用户的状态(object或null)传递给reducer,这取决于用户是登录还是注销。这是我第一次使用redux,所以我不明白为什么我的代码不工作。没有错误,但在redux devtools中,state总是等于null。
配置存储:

import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux';
import userReducer from './utils/userReducer';

const store = configureStore({
  reducer: {
    user: userReducer,
  }
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

我的减速器:

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: 'user',
    initialState: null,
    reducers: {
        setUser: (state, action) => {
            state = action.payload;
        }
    }
})

export const {setUser} = userSlice.actions;
export default userSlice.reducer;

发送地点:

import { setUser } from '../utils/userReducer'
  import { useDispatch } from 'react-redux'

  const dispatch = useDispatch()

  const handleLogin = async (e) => {
    e.preventDefault()
    const { user } = await logInWithEmail(email, password)
    await setCurrentUser(() => dispatch(setUser))
  }

Firebase函数,我在这里尝试使用reducer:

export const setCurrentUser = async (setUser) => {
    await onAuthStateChanged(auth, (currentUser) => {
        setUser(currentUser)
    })
}

我明白,使用useContext会容易得多,但我试图通过暗示来学习redux。

qrjkbowd

qrjkbowd1#

这样试试看:

import { setUser } from '../utils/userReducer'
import { useDispatch } from 'react-redux'

const dispatch = useDispatch()

const handleLogin = async (e) => {
  e.preventDefault()
  const { user } = await logInWithEmail(email, password)
  // This line updated
  await setCurrentUser((currentUser) => dispatch(setUser(currentUser)))
}

理由:
你的setCurrentUser函数prop setUser只是函数() => dispatch(setUser),但是这个函数不接收任何prop,并且dispatch(setUser)不做任何事情。你需要将值(payload)传递给reducer函数。
此外,尝试将dispatch本身作为prop传递,并在onAuthStateChanged内分派。

export const setCurrentUser = async (dispatch) => {
  await onAuthStateChanged(auth, (currentUser) => {
    dispatch(setUser(currentUser))
  })
}

如果handleLoginsetCurrentUser函数分别在不同的文件中,则导入setUser reducer函数。

相关问题