december 2021 redux training

configureStore.ts

import { applyMiddleware, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { postReducer } from './posts/posts'
import { combineReducers } from '@reduxjs/toolkit'

export function configureStore() {
  const middlewares = [thunkMiddleware]
  const middlewareEnhancer = applyMiddleware(...middlewares)

  const enhancers = [middlewareEnhancer]
  const composedEnhancers = composeWithDevTools(...enhancers)

  const store = createStore(combineReducers({ posts: postReducer }), undefined, composedEnhancers)

  return store
}

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import App from './components/App/App'
import reportWebVitals from './reportWebVitals'
import { configureStore } from './store/configureStore'

export const store = configureStore()

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

10. Erstellen eines neuen Posts

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