tanner-west

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

export interface UserSettingsState {
  darkMode: boolean;
}

const initialState: UserSettingsState = { darkMode: false };

export const userSettingsSlice = createSlice({
  name: "userSettings",

tanner-west

import {
  Button,
  RefreshControl,
  SafeAreaView,
  ScrollView,
  Text,
  View,
} from "react-native";
import { Provider, useDispatch, useSelector } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

tanner-west

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

interface Post {
  id: number;
  userId: number;
  title: string;
  body: string;
}

export const postsApi = createApi({

tanner-west

import React from 'react';
import {RefreshControl, SafeAreaView, ScrollView, Text} from 'react-native';
import {createStore, applyMiddleware} from 'redux';
import {Provider, useDispatch, useSelector} from 'react-redux';
import thunk from 'redux-thunk';
import {getPosts} from './thunks';
import postsReducer from "./postsReducer";
import { toggleDarkMode } from "./actions";

const store = createStore(postsReducer, applyMiddleware(thunk));

tanner-west

// thunks.ts

export const getPosts = () => {
  return dispatch => {
    dispatch(getPostsRequested());
    return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Response not ok');
        }

tanner-west

// reducer.ts

export interface IPostsState {
  readonly loading: boolean;
  readonly posts: Array<actions.IPost>;
  readonly error: Error | null;
  readonly darkMode: boolean;
}

// Initial reducer state

tanner-west

// actions.ts

import { Action } from "redux";
export type IPostActions = IGetPosts | IGetPostsFailure | IGetPostsSuccess;

export enum GET_POSTS {
  REQUESTED = "GET_POSTS_REQUESTED",
  SUCCESS = "GET_POSTS_SUCCESS",
  FAILURE = "GET_POSTS_FAILURE",
}

tanner-west

import React from 'react';
import {SafeAreaView, ScrollView, Text, RefreshControl} from 'react-native';
import {
  selector,
  RecoilRoot,
  useRecoilValueLoadable,
  useRecoilRefresher_UNSTABLE,
} from 'recoil';

const postsState = selector({

tanner-west

import React from 'react';
import {createStore, applyMiddleware} from 'redux';
import {Provider, useDispatch, useSelector} from 'react-redux';
import thunk from 'redux-thunk';
import {RefreshControl, SafeAreaView, ScrollView, Text} from 'react-native';

// Fetch post thunk
const fetchPosts = () => {
  return dispatch => {
    dispatch(fetchPostRequested());

tanner-west

import { useSelector } from 'react-redux';
import { View, Text } from 'react-native';

function PostsList() {
  const posts = useSelector(state => state.posts);
  
  return (
    <View>
      {posts.map(post => (
        <Text key={post.id}>{post.title}</Text>