med-e23065449be2-rtk-app-with-slice.tsx

import {
  Button,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  Text,
  View,
} from "react-native";
import { Provider, useDispatch, useSelector } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { postsApi, useGetPostsQuery } from "./api";
import userSettingsReducer, {toggleDarkMode} from './userSettingsSlice'

export const store = configureStore({
  reducer: {
    [postsApi.reducerPath]: postsApi.reducer,
    userSettings: userSettingsReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

setupListeners(store.dispatch);

const Posts = () => {
  const { isFetching, data, error, refetch } = useGetPostsQuery();
  const darkMode = useSelector((state) => state.userSettings.darkMode);
  const dispatch = useDispatch();

  return (
    <SafeAreaView>
      <ScrollView
        style={{ backgroundColor: darkMode ? "black" : "white" }}
        refreshControl={
          <RefreshControl refreshing={isFetching} onRefresh={refetch} />
        }
      >
        {error ? (
          <Text style={{ color: darkMode ? "white" : "black" }}>Error!</Text>
        ) : null}
        {data?.map((post) => (
          <View key={post.id}>
            <Text style={{ color: darkMode ? "white" : "black" }}>
              {post.title}
            </Text>
          </View>
        ))}
        <Button
          title={"Toggle Dark Mode"}
          onPress={() => dispatch(toggleDarkMode())}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <Posts />
    </Provider>
  );
}