REDUX

fire message to store with payload -> store matches the name with the reducer -> new state

useSelector to get a slice of state using... a selector! 

@reduxjs/toolkit provides code to reduce boilerplate

configureStore({
  reducer: {
    reducerNameUsedForStateSelectorToo: sliceName.reducer,
    ...
  },
  middleware: (getDefaultIddleware) => getDefaultIddleware().prepend(iddleware)...
})

const {
    name : string,
    reducer : ReducerFunction, <- composition of all reducers in this slice
    actions : Record<string, ActionCreator>, <- like what createAction returns (see below)
    caseReducers: Record<string, CaseReducer>.
    getInitialState: () => State
} =
 createSlice({  <- Uses createReducer and createAction internally, see below
  name,
  initialState,
  reducers: {
    fn1: (state, action: PayloadAction<T>) => ({ new state })
  }
})

function createSlice({
    // A name, used in action types
    name: string,
    // The initial state for the reducer
    initialState: any,
    // An object of "case reducers". Key names will be used to generate actions.
    reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>

    // A "builder callback" function used to add more reducers, or
    // an additional object of "case reducers", where the keys should be other
    // action types
    extraReducers?: <- usually used to react on "external" changes i.e. createAsyncThunk fulfilled
    | Object<string, ReducerFunction>
    | ((builder: ActionReducerMapBuilder<State>) => void)
})


createSlice broken up:

import { createAction, createReducer } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const increment = createAction('counter/increment') <- returns a function: (args) => ({ type, payload })
const decrement = createAction('counter/decrement')
const incrementByAmount = createAction<number>('counter/incrementByAmount')

const initialState = { value: 0 } as CounterState

const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state, action) => {    <- You may see or remember this is usually done with one long switch.
      state.value++                             <- They introduced builder notation for less boilerplate
    })
    .addCase(decrement, (state, action) => {
      state.value--
    })
    .addCase(incrementByAmount, (state, action) => {
      state.value += action.payload
    })
})

Has three methods: addCase, addMatcher, addDefaultCase - do pretty much what you expect.