website/sandbox/contentful/src/store.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
import { useSelector, TypedUseSelectorHook } from "react-redux";

export interface Book {
  title: string;
  author: string;
  // TODO(wpcarro): Prefer datetime type here.
  publicationDate: string;
}

export interface State {
  isLoading: boolean;
  books: Book[];
}

const initialState: State = {
  isLoading: true,
  books: [],
};

export const { actions, reducer } = createSlice({
  name: "application",
  initialState,
  reducers: {
    toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
    setBooks: (state, action) => ({ ... state, books: action.payload }),
  }
});

/**
 * Defining and consuming this allows us to avoid annotating State in all of our
 * selectors.
 */
export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;

export default configureStore({ reducer });