Skip to main content

​
Architecture

Nadie Sabe Nada uses Redux Toolkit for centralized state management. Redux Toolkit provides a simplified and opinionated approach to Redux development with built-in best practices.

​
Store Configuration

The application store is configured in src/store/store.js using Redux Toolkit’s configureStore:
src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import podcastReducer from './slices/podcastSlice';
import playerReducer from './slices/playerSlice';
import filterReducer from './slices/filterSlice';
import audioTimeReducer from './slices/audioTimeSlice';

export const store = configureStore({
  reducer: {
    podcast: podcastReducer,
    player: playerReducer,
    filter: filterReducer,
    audioTime: audioTimeReducer,
  },
});

​
State Structure

The Redux store is organized into four main slices:

Podcast Slice

Manages podcast episodes, favorites, and user collections

Player Slice

Controls audio playback state and current podcast

Audio Time Slice

Tracks playback positions for each episode (Redux)

Audio Time Context

React Context for playback time management and persistence

Filter Slice

Manages episode filtering and pagination

​
Using Redux in Components

Components access Redux state using the useSelector hook and dispatch actions using the useDispatch hook: 
import { useDispatch, useSelector } from 'react-redux';
import { fetchPodcasts, toggleFavorite } from './store/slices/podcastSlice';

const MyComponent = () => {
  const dispatch = useDispatch();
  const { songs, loading } = useSelector((state) => state.podcast);
  
  useEffect(() => {
    dispatch(fetchPodcasts());
  }, [dispatch]);
  
  const handleFavorite = (podcast) => {
    dispatch(toggleFavorite(podcast));
  };
  
  // Component logic...
};

​
Key Features

Redux Toolkit’s createAsyncThunk handles asynchronous operations like API calls with built-in pending/fulfilled/rejected states.
Redux Toolkit uses Immer internally, allowing you to write “mutating” logic in reducers that is actually immutable.
User preferences and playback data are automatically persisted to localStorage for offline access.
While this app uses JavaScript, Redux Toolkit is designed with TypeScript in mind and provides excellent type inference.

​
State Persistence

Several state slices persist data to localStorage:
  • Podcast episodes: Favorites, completed, listen later lists
  • Playback times: Current position in each episode
  • Player volume: User’s preferred volume level
  • Playback preferences: Whether to save playback times

​
Next Steps

Explore each slice in detail:

Build docs developers (and LLMs) love

Get started for freeTalk to us