1. Store initialisieren + posts slice erstellen (ohne Toolkit)

Info: Erstelle alle Redux-Features in src/store/

1. Installiere dir die Redux-Devtools-Browsererweiterung (Chrome/Firefox)

2. Initialisiere deinen Store und integriere die dev-tools-extension

3. Integriere einen Posts-Reducer (in src/store/posts/posts.ts) in deinen Store mit folgendem Typen und initialState:

type Post = {
  id: string
  content: string
  title: string
  creationDate: string
}

type PostState = {
  byId: Record<Post['id'], Post>
  ids: Array<Post['id']>
}

const initialState: PostState = {
  byId: {},
  ids: []
}

4. Öffne deine Anwendung und prüfe in den Redux-Dev-Tools, dass dein Store korrekt
   initialisiert wurde (du solltest dein initiales state sehen)

Reducer Beispiel

const initialState = [] // empty list of Todos

const reducer = (oldState = initialState, action) => {
  switch (action.type) {
    case 'todos/todoAdded': {
      const addedTodo = action.payload.todo
      
      return [...oldState, addedTodo]
    }
    default: {
      // leave state as it is
      return oldState
    }
  }
}

2. Actions und neues State

1. Erstelle einen actionCreator addPost() mit einem action.type = 'posts/addPost'
2. Sorge dafür, dass der postReducer:
   1. auf die Action reagiert
   2. ein neues PostState zurueckgibt
   3. das neue PostState sollte zum einen in byId den neuen Post und zum anderen
      in ids die id des Posts beinhalten
3. Dispatche manuell eine posts/addPost action mit Hilfe der Redux-Dev-Tools und
   vergewissere dich, dass das State korrekt geupdated wurde

Beispiel ActionCreator:

const ADD_TODO = 'ADD_TODO'

const addTodo = (text: string) => {
  return {
    type: ADD_TODO,
    payload: { text },
  }
}

3. Verknüpfung mit dem view via React-Redux

Hinweis nutze zum korrekten typen der Props ConnectedProps https://react-redux.js.org/using-react-redux/usage-with-typescript#typing-the-connect-higher-order-component

1. Installiere react-redux: npm install react-redux
2. Wrappe deine App mit der <Provider> komponente von react-redux und übergib deinen Store
3. Zeige in der PostListing-Komponente die posts aus dem Redux-Store an (Achtung: die posts liegen noch nicht als Liste vor!)
4. Füge der PostListing-Komponente einen Button hinzu, welcher einen Standard-Post mit Hilfe der Funktion createBlankPost aus dem Post-Model erstellt und dem Store hinzufügt
5. Betätige den Button mehrmals und prüfe in den Redux-Devtools, dass:
   1. jedes mal eine neue Action dispatched wird
   2. jeder neue Post auch eine eigene Id besitzt. (schau dir auch kurz die Implementierung von createBlankPost an)
   3. klicke eine Action an und schau dir in den Devtools auch den Diff dazu an

4. Einführung von Selektoren

1. Erstelle einen primitiven Selektor, welcher das Postsstate ausliest und verwende diesen anstelle des direkten State-Zugriffs in PostListing
2. Erstelle einen memoisierten Selektor, welcher den ersten Post zurückgibt.
3. Verwende den memoisierten Selektor in der PostListing-Komponente und console.log() ihn (er muss nicht via JSX gerendert werden)

Reselect

5. Einführung von Redux-Toolkit und Vereinfachung des Stores

1. Ersetze die selbstgeschriebene configureStore() funktion, durch einen Aufruf von Redux-Toolkits configureStore()
2. Schreibe das Post slice so um, dass es createSlice() von Redux-Toolkit verwendet

6. Seiteneffekthandling: Posts fetchen

1. Erstelle einen thunk action creator mit createAsyncThunk() namens fetchPosts,
   welcher analog zu fetchPosts() in src/model/Post.ts alle posts fetched.

2. Handle alle Action-Types des thunks im postReducer:
   (
   pending -> aktuelles State returnen,
   fulfilled -> Postliste aus der response returnen,
   rejected -> aktuellen State returnen (wir handlen den Fehler vorerst nicht)
   )

3. Erstelle ein weiteres slice postsLoading in src/store/posts/loading.ts mit folgenden Eigenschaften:

   type PostLoadingState = boolean
   
   const initialState: PostLoadingState = false

Hinweis: Lasse die reducers-property des slices vorerst leer

4. Erstelle einen primitiven Selektor, welcher das PostLoadingState ausliest

5. Stelle sicher, dass der loading reducer auch im kombinierten RootReducer verwendet wird

6. Reagiere im postsLoading slice auf die fetchPosts() Action-types:
   (
   pending -> true
   fulfilled -> false
   rejected -> false
   )

7. Ersetze in PostListing.tsx das loading state durch postsLoading aus dem Redux-Store.
   Ersetze außerdem das fetching durch einen Aufruf des fetchPosts thunk creators.
   Sorge zudem dafür, dass der fetch useEffect nur beim ersten Rendern der Komponente aufgerufen wird.
   (Da wir die Posts jetzt im Application-State halten, muss nicht jedesmal neu gefetched werden)

   Hinweis: Dadurch, dass wir die Posts nun nur noch beim ersten Rendering fetchen, werden einige Funktionen
   unserer App vorerst nicht korrekt funktionieren (bspw. postPost).

7. Post via Selektor auslesen

Derzeit werden in unserem Post-Listing alle Posts aus dem Store gelesen und einfach auf Item-Komponenten gemapped.
Nun soll das ganze folgendermaßen umgebaut werden:

1. Lies in PostListing nur noch die Post-Ids statt der Posts aus dem Store aus
2. Mappe dann in PostListing über die Ids
3. Die PostListingItem-Komponente soll nun als Props statt eines Post dessen id erwarten
4. Erstelle einen primitiven Selektor getPostById(), welcher aus dem State einen Post anhand dessen id ausliest
   und verwende diesen in der PostListingItem-Komponente.

8. Post löschen

1. Analog zu Aufgabe 6 soll nun die deletePost()-Funktion aus src/model/Post.ts durch einen Thunk ersetzt werden.
2. Das Post state soll erst aktualisiert werden, wenn das Request erfolgreich war.

Hinweis: rejected und pending müssen hier vorerst nicht gehandled werden

Immutable remove:

 .addCase(deletePost.fulfilled, (state, action) => {
        const { id } = action.payload
        const { 
          [id]: postToRemove, // const _ = state.byId[id] <= dynamic access of element via key (id)
          ...byId // rest operator -> all remaining elements in object are put into new obj with the name "byId"
        } = state.byId

        console.log('hi, I deleted this post for you:', postToRemove)

        return {
          ids: state.ids.filter((postId) => postId !== id),
          byId,
        }
      })

9. Post editieren

1. Sorge dafür dass der Post zum editeren nicht mehr neu gefetched werden muss

Hinweis: Gehe dabei analog zu Aufgabe 7 vor.
Die id kommt in diesem Fall allerdings aus der Route, welche via props.match.params.id ausgelesen werden kann.
Hier kann die Typisierung etwas knifflig sein, um die Props zu typisieren, könnt ihr folgendermaßen vorgehen:

type RouteProps = {
  id: string
}
 
type OwnProps = {
  postId: Post['id']
 } & RouteComponentProps<RouteProps>

 const mapStateToProps = (state: RootState, ownProps: OwnProps) => {
 const postId = ownProps.match.params.id

  return {
    post: selectors.getPostById(state, { postId }),
  }
}

const mapDispatchToProps = {
  updatePost,
}

const connector = connect(mapStateToProps, mapDispatchToProps)

type PropsFromRedux = ConnectedProps<typeof connector>
type Props = PropsFromRedux & OwnProps

const PostEditorView = (props: Props) => {
   ...
 }

2. Ersetze die updatePost-Funktion aus src/model/Post durch einen entsprechend Thunk in
   src/store/posts/posts. Ist das request erfolgreich, soll der Store mit der Antwort des Servers aktualisiert werden.

Hinweis: Das Transient-Post state wird nicht mehr benötigt.

10. Erstellen eines neuen Posts

1. Ersetze nun auch die postPost-Funktion aus src/model/Post durch einen entsprechenden Thunk