Redux 工具包仍然存在。我的状态无法访问答案

【问题标题】：Redux toolkit persist. My states cannot be accessedRedux 工具包仍然存在。我的状态无法访问
【发布时间】：2022-08-14 04:36:24
【问题描述】：

我在 react native 中的应用程序很好，但是当我尝试实现 redux 工具包时，我的状态无法正常工作那是我无法访问它们，这会引发错误。

所以这是错误代码中的代码

const Router = () => {
  const { user, userDef } = useSelector(userdata);
  const { isAuthenticated } = useSelector(authdata);
  const dispatch = useDispatch();
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        dispatch(setUser({ ...user.metadata, email: user.email }));
      } else {
        dispatch(setUser(null));
        dispatch(login(false));
      }
    });
  }, []);
  const authNav = () => {
    return (
      <NativeStack.Navigator screenOptions={{ headerShown: false }}>
        {user && isAuthenticated ? (
          <>
            {userDef === \"Doctor\" ? (
              <>
                <NativeStack.Screen
                  name=\"doctorcontainer\"
                  component={DoctorContainer}
                />
              </>
            ) : userDef === \"Nurse\" ? (
              <>
                <NativeStack.Screen
                  name=\"nursecontainer\"
                  component={NurseContainer}
                />
              </>
            ) : userDef === \"Patient\" ? (
              <>
                <NativeStack.Screen
                  name=\"patientcontainer\"
                  component={PatientContainer}
                />
              </>
            ) : (
              <NativeStack.Screen
                name=\"logincontainer\"
                component={LoginContainer}
              />
            )}
          </>
        ) : (
          <>
            <NativeStack.Screen
              name=\"logincontainer\"
              component={LoginContainer}
            />
          </>
        )}
      </NativeStack.Navigator>
    );
  };

这是我的商店

import { combineReducers, configureStore } from \"@reduxjs/toolkit\";
import AsyncStorage from \"@react-native-async-storage/async-storage\";
import { persistReducer } from \"redux-persist\";
import thunk from \"redux-thunk\";
import authSlice from \"./authSlice\";
import userSlice from \"./userSlice\";

const reducers = combineReducers({
  auth: authSlice,
  user: userSlice,
});
const persistConfig = {
  key: \"root\",
  storage: AsyncStorage,
  whitelist: [\"loginUser\"],
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
  reducer: { persistedReducer },
  middleware: [thunk],
  devTools: process.env.NODE_ENV !== \"production\",
});
export default store;

和 app.js

import { StatusBar } from \"expo-status-bar\";
import { Router } from \"./src/navigation/router\";
import { Provider } from \"react-redux\";
import store from \"./src/store\";
import { LogBox } from \"react-native\";
import { PersistGate } from \"redux-persist/integration/react\";
import { persistStore } from \"redux-persist\";

LogBox.ignoreLogs([
  \"AsyncStorage has been extracted from react-native core and will be removed in a future release.\",
]);
let persistor = persistStore(store);
export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router />
      </PersistGate>
      <StatusBar style=\"auto\" animated />
    </Provider>
  );
}

这是我的切片代码

const userSlice = createSlice({
  name: \"loginUser\",
  initialState: { user: null, userDef: null },
  reducers: {
    setUser(state, action) {
      state.user = action.payload;
    },
    setUserType(state, action) {
      state.userDef = action.payload;
    },
  },
  extraReducers: {
    [registerUser.pending]: (state, action) => {
      state.status = \"loading\";
    },
    [registerUser.fulfilled]: (state, action) => {
      state.status = \"success\";
    },
    [registerUser.rejected]: (state, action) => {
      state.status = \"failed\";
    },
    [signInUser.pending]: (state, action) => {
      state.status = \"loading\";
    },
    [signInUser.fulfilled]: (state, action) => {
      state.status = \"success\";
    },
    [signInUser.rejected]: (state, action) => {
      state.status = \"failed\";
    },
  },
});
export const { setUser, setUserType } = userSlice.actions;
export const userdata = (state) => state.user;
export default userSlice.reducer;

我不知道问题的原因，我已经阅读了文档和博客，但没有任何帮助

检查来自redux-toolkit.js.org/tutorials/quick-start 的文档

标签： react-native expo

【解决方案1】：

你好~我发现了一个问题。
但这可能不仅仅是一个问题。
您可以先更改下面的代码进行测试吗？

在您的代码中

const Router = () => {
  const { user, userDef } = useSelector(userdata);
  const { isAuthenticated } = useSelector(authdata);
...

此代码更改为

const Router = () => {
  const { user, userDef } = useSelector(state => state.userdata);
  const { isAuthenticated } = useSelector(state => state.authdata);
...

使用 useSelector 时，需要从 state 中获取。
useSelector(userdata) => useSelector(state => state.userdata)
请检查 useSelector 中的 state 对象是否实际注册在 reducer 中。
如果这不起作用，请添加评论。
您可能需要对您的商店代码.

希望这对你有帮助！

【讨论】：

所以我在我的切片export const userdata = (state) => state.user; 和export const authdata = (state) => state.auth; 中有这些行我按照你说的做了，它仍然是同样的问题。
请我已将我的切片代码添加到帖子中
它现在工作.. const { user, userDef } = useSelector(() => userdata); 和 const { isAuthenticated } = useSelector(() => authdata); 非常感谢您的反馈
现在的问题是我无法从我的 expo 应用程序登录到 firebase，该应用程序在 redux 持续存在之前工作。我已经做了所有的检查，但什么都没有，这与商店无关
所以无法获取用户的状态，这就是我无法登录的原因

【解决方案2】：

const { userState, authState } = useSelector((state) => ({
    userState: state.persistedReducer.user,
    authState: state.persistedReducer.auth,
  }));

【讨论】：