Vite has been with us for around 3 years. It was created by in Evan You 2021. He's also the creator of Vue, and whilst you might not want to use Vue yourself, Vite can be used with React, Preact, Lit, Svelte or Vanilla JS.

Vite is a bundler, similar to Webpack, Parcel and Rollup. It acutally uses Rollup under the hood. But Vite is faster and has much less bloat that Webpack.

Another one of the advantages of Vite over other dev tools is its use of Hot Module Replacement (HMR) to give that fast feedback loop when you're speeding ahead with your code dev. It speeds up Typescript as it skips type-checking and uses ESBuild to transpile your dev code.

# Vite 5 new features
## Switching away from commonJS to ESM
If you're using libraries like Jest, Tailwind or any other package that has a CommonJS export configurations  then you'll have to update your config files to work with the ESM format. Everything is moving to ESM so this is a good chance to get onboard with the new ESM movement

## Rollup 4
Vite had used Rollup in the background since the start, and Vite 5 is using Rollup 4 which is going to improve performance. That's also going to offer new options to improve your dev server performance profile.

# What it takes to upgrade to Vite 5
- Vite 5 supports Node 18+ which is where we all need to be. 
- config files with module.export need to be converted over to ESM standards. This it going to be a great move as previously CommonJS standards were great, but personally I experienced issue with some conflicts using more specialist packages that would be incompatible with other requests.

# Who's embracing Vite now?
Astro, Nuxt SvelteKit and Solid Start have supported Vite for a while, but recently Remix and RedwoodJS have switched to Vite, and this paves the way for more React based ecosystems to follow this trend.

# What about Vitest?
When I started using Vitest, there was a certain amount of disappointment that I couldn't use Testing Library alongside it. But Vitest is now an option alongside Jest for Vue Testing Library. And I'm enjoying the speed that Vite is helping to process my unit tests. Previously I'd get to a point where I'd have to switch to testing changes only to run a decent feedback loop without my IDE stalling, but with Vitest I can just run it in real-time and pick up any issue as I'm writing new code.

# Is Vite just for Node?
The discussion about which runtime is best is something for another article, but Vite is supported by Node, Deno and Bun. So whatever you choose, it's going to work.

# What's the future for Vite?
At ViteConf, Evan You unveiled Vite's long-term plan to work on Rolldown a Rust-port of Rollup with compatible APIs. The plan is to use Rolldown in Vite Core to take on the tasks of both Rollup and esbuild. This will mean a boost in build performance.  Rust is becoming the go to for tooling with NextJs already using it with their TurboPack bundler.

Vite 5.0 is here

TypeScript 5.0 Beta has been released and is available for download. You'll have to update your dependencies in your
`package.json'.

```js
  "devDependencies" : {
    ...
    "typescript" : "^5.0.0-beta"
    }
```

## `const` Type Parameters

When you're inferring the object type, TypeScript will give you a general type.

```js
type HasNames = { readonly names: string[] };

function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
    return arg.names;
}

// Inferred type: string[]
const names = getNamesExactly({names: ["Alice", "Bob", "Eve"]});
```

but now you can add a `const` modifier to a type parameter declaration to cause `const`-like inference to be the
default.

```js
type HasNames = { names: readonly string[] };
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
//                       ^^^^^
    return arg.names;
}

// Inferred type: readonly ["Alice", "Bob", "Eve"]
// Note: Didn't need to write 'as const' here
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });
```

## Decorators

One of the most interesting additions for me is Decorators. These are an upcoming ECMAScript feature that allows the
customisation of classes and members in a reusable way.

```js
export class ProductService {
    public getProducts() {
        return fetch('/api/getProducts');
    };
}
```

If we wanted to trace this in development we could start adding in logger calls or the really dirty `console.log()`
method. But with decorators we can create a decorator to wrap methods with the extra functionality.

```js
function log(originalMethod: any, _context: any) {

    function replacementMethod(this: any, ...args: any[]) {
        console.log("LOG: Entering method.")
        const result = originalMethod.call(this, ...args);
        console.log("LOG: Exiting method.")
        return result;
    }

    return replacementMethod;
}
```

```js
export class ProductService {
    @log
    public getProducts() {
        return fetch('/api/getProducts');
    };
}
```

So when we are now working in our project, we can flag a method with the decorator without added piles of extra code
that you might want to remove later, or just making the code less readable. You can go further with this by extending
the decorator further to match what you are trying to do.

## Enums

Enums have been something that I find quite helpful in TypeScript. In TypeScript 5.0 there are now some improvements to
how enums can be used. Previously you could pass thing in to an enum argument and TypeScript wouldn't raise an error.
Now you will be a warning represented as you pass it in. However, I'd still use `LogLevel.DEBUG` instead of `0`.

```js
enum LogLevel {
    DEBUG,
    ERROR,
    WARNING,
}

const log = (level: LogLevel, message: string) => {
};

// Valid
log(2, "Error message");

log(LogLevel.WARNING, "Warning message");

// Invalid
log(1234, 'Invalid message')
```

## Speed, Memory, and Package Size Optimisations

Taken straight from Microsoft's own blog, here are the improvements for installing and running TypeScript:

| Scenario	               | Time or Size Relative to TS 4.9 |
|-------------------------|---------------------------------|
| material-ui build time  | 90%                             |
| Playwright build time   | 89%                             |
| tsc startup time        | 89%                             |
| tsc build time          | 86%                             |
| Outlook Web build time  | 83%                             |
| VS Code build time      | 81%                             |
| typescript Package Size | 58%                             |

Microsoft are keeping quiet on how they made these improvements, but it's also mentioned that they've moved from
namespaces to modules, probably inline with ESM plans. This would be extra useful with using Microsoft's Monaco package
which had issues related to namespacing vs ESM.

Also, the TypeScript package is about 33% smaller now. This comes with some slim-lining some object types and adding
uniformity.

This is all exciting to see, but it's still in Beta, so maybe roll back that beta dependency and wait on what Microsoft
are going to hand out in the general release!


TypeScript 5.0 Beta is available

Tailwind CSS is a very popular framework, and you might be already using it yourself, but whilst the tailwind site
has instructions for installing it on NextJS, Vue, Nuxt, Vite and 12 other JS frameworks you won't find any instructions
for Astro.

So I went ahead and did a bit of trial and error to get Tailwind working with Astro.

## Installing Tailwind

First thing is to install the Astro helpers and Tailwind CSS package. I use pnpm but you can do this with npm or yarn as
well.

```typescript jsx
pnpm
install
@astrojs/
tailwind
tailwindcss
```

Then, apply this integration to your astro.config.* file using the integrations property:

```typescript jsx
import {defineConfig} from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
    // ...
    integrations: [tailwind()],
});

```

And it's as easy as that. Maybe Tailwind need to copy/paste this article onto their website? Anyway, now you can get
into your layouts first and get them all styled with Tailwind utilities and then move onto the rest of the pages.

Using Tailwind with AstroJS

There has certainly been a large interest in Astro recently, and with v2.0 now out a lot of devs
have been excited about the performance benefits of Astro over other frameworks like NextJS. So with
that in mind I took to comparing both these frameworks and seeing which one is best.

### What exactly is Astro and NextJS?

Astro 2.0 and NextJS 13 are two popular web development frameworks that have their unique features and performance
capabilities. Both allow Server-Side Rendering (SSR) and Client-Side Rendering (CSR). NextJS is built around React,
Astro is defined by on its own framework but allows you to include components from any JS framework.

### Server-Side Rendering (SSR)

Both Astro 2.0 and NextJS 13 provide server-side rendering out of the box, allowing faster page loads and better search
engine optimization (SEO) capabilities. Astro has a much faster response time when comparing the two deployed to the
same cloud provider on the same app slot setup.

## Client-Side Rendering (CSR) and Static-Site Generation (SSG)

NextJS can now perform CSR by using the `use-client` flag at the top of any component file. Astro can do this by
flagging a component inside a page with `<Component client:load />` but this has to be used every time the component is
referenced in a page, unlike NextJS. Astro can also perform SSG which means the render of static content is done on
build. The disadvantage of this is that if you want to change anything that is static then you will need to rebuild and
deploy the application to do this.

### Build Time

Astro 2.0 has a faster build time than NextJS 13, thanks to its use of pre-built static HTML and CSS - the SSG mentioned
above. This can be particularly useful for large-scale projects with many pages, where build time can be a significant
bottleneck. Astro will only rebuild changes so the first build might take longer than any

### Size

NextJS 13 is larger Astro 2.0, due to its bundled features such as automatic code splitting, prefetching,
and optimized images. However, these features can significantly improve page load times, particularly for larger web
applications.

### Customization

Astro 2.0 offers greater customization options than NextJS 13, with the ability to add and remove features as needed.
This can be particularly useful for developers who want more control over their web application's functionality and
design.

### Community and Ecosystem

NextJS 13 has a larger and more established community than Astro 2.0, with more third-party packages and plugins
available. This is going to change over time. Visual Studio already has an extension to support highlighting for Astro
and JetBrains are working on supporting Astro in there 2023.\*.* versions of WebStorm.

In summary, both Astro 2.0 and NextJS 13 are capable frameworks with their unique strengths and weaknesses. Astro 2.0
provides faster build times and greater customization options, while NextJS 13 offers a more extensive community and
ecosystem and more advanced features. Ultimately, the choice between these two frameworks will depend on the specific
needs and requirements of a particular web development project. But the future looks great for these two to
compete with each other and improve the experience for developer and end-users alike.


NextJS vs Astro - Performance comparison

If you were looking to start writing with React today and visited the React website,
the [Create a new React App](https://reactjs.org/docs/create-a-new-react-app.html) page would give you a few options for
getting started. The React team recommends [NextJS](https://nextjs.org/) for a server side rendered
app, [Gatsby](https://www.gatsbyjs.com/)
for a static site, and Create React App for a client side rendered SPA. But is Create React App really the option that
should be recommended for CSR and new users?

## What is Create React App?

Create React App (CRA) is a templated project for getting started with React. A `react-scripts` package will install a
set of other packages to compliment it. You can be up and running in minutes and writing code. But on the downside
you'll have a large amount of node packages installed that are not needed if you'd set it up manually.

## Why should you use CRA?

CRA is a Client Side Rendering library, which means that everything renders in the browser. This can be great for a
simple Single Page Application but isn't good for SEO, metadata or first load performance. If you want to share content
from your side on social media, use SEO to get customers in or have standalone pages that render fast then NextJS is
a better option.

## What's the issue with CRA?

One of the biggest issues with CRA is that it doesn't work correctly with all other packages. This is obviously
something that can happen with other libraries, but CRA what the whole project relies upon. If you want to get around
this, then you have to eject the app and manage everything yourself. With CRA's `react-scripts` defining a lot of
package requirements with specific versions this means that you can't use the latest versions of libraries and if you're
going to eject the app then you're going to have to manually manage all those packages. It's a massive time drain.

## What's the alternative to CRA?

As mentioned above, CRA is a Client Side Rendering (CSR) based library. If you wanted an alternative CSR then I'd
recommend [Vite](https://vitejs.dev/). Vite is lean CSR which serves with native EcmaScript Modules. It does not involve
bundling with tools like Webpack, so it's fast to start. It supports Hot Module Replacement so as you write your app
you'll see the browser you'll see it update without a full reload, and it'll only update what has changed.

## Is CRA actually dead?

The simple answer to this is no. The team behind CRA is working to catch up to all the other frameworks and libraries
that have progressed at lightening speeds whilst CRA has be gathering dust on the shelf. But if others are offering a
managed solution why don't Facebook leave it to others to offer a starting point? Well I think it is because they want
something simple to offer starters who can then progress onwards, but in reality devs are picking up React with CRA,
building full projects with it and then realising that there were better options to choose and then having to claw back
time to migrate to frameworks like NextJS, Astro or Vite. So may Facebook can add a warning next to CRA whilst it's
still the CRAp option?



Is Create React App dead?

Unless you've been hiding under a rock you'll know that when it comes to creating your next React project CreateReactApp
isn't what you want to be using for your base. NextJS is definitely the front runner of the React Frameworks, and it's
just had a major update in the form of v13.

## Routing
The first thing that stuck out was the change in the folder layout. Everything now runs from the `/app` folder. This is
functionality that is still in **beta** and can be rolled back, but looking at the file tree below we can see that
the `/app` folder has all our pages and styles in whilst the `/pages` folder still has the `/api` folder for all the
endpoint files. I'm thinking that this will move to an `/api` folder in the root alongside `/app` in future.

``` 
├── app
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
├── pages
│   └── api
│       └── hello.ts
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
├── README.md
└── tsconfig.json
```

You'll also notice the absence of the `index.tsx` file. Now the `page.tsx` serves as the root file for the folder so
anything calling for the root will be served with `page.tsx`. There is also now the `page.module.css` instead
of `home.module.css` and I guess that's to suit the naming of the file that have changed?

Now when we want to have `/products/` we have to have a folder called products with a `page.tsx` in it. Routes are now
folder based instead of the previous file and folder solution in NextJS 12.

## Turbopack
For quite a long time we've been using Webpack to bundle or code up. Now Webpack creator Tobias Koppers has joined
Vercel (the makers of NextJS) and brought along the successor to Webpack called Turbopack.

Turbopack's main selling point is that it is significantly faster that Webpack. It does this by monitoring the state of
the framework and only running changes. It's also faster due to it being written in Rust.

To switch to Turbopack in NextJS add the `--turbo` flag to your scripts config in `packages.json`
```typescript jsx
  "scripts": {
    "dev": "next dev --turbo",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
}
```

Future plans are for everything NextJS to be run with Turbopack instead of Webpack. How this new tool will benefit
NextJS users is yet to be felt in its infancy, but the bigger the app the greater the difference according to the team
at Vercel.

## Link upgraded
In NextJS 12 the Link object was a bit odd. With ReactRouter you could easily create a link
using `<Link to="/Products">Products</Link>` but NextJS wanted to you to also include an anchor tag:

```jsx 
import Link from 'next/link';

<Link href="/Products">
    <a>Products</a>
</Link>
```

So now in NextJS we get something more link ReactRouter:

```jsx
<Link href="/about">
    About
</Link>
```

Definitely a welcomed update as it's much simpler to write and inline with what we'd expect.

## Font integration
NextJS now as a new font system that can optimise your font collection including custom fonts.
This is a big help because it reduces your dependancy on external sources to store your font files and therefore
removing those external file requests.

Fonts can be self-hosted with any font type, and NextJS will handle all the scaling of the fonts for you if you choose
to use them on standard elements.

```typescript  jsx
import {Inter} from '@next/font/google';

const inter = Inter();

<html className={inter.className}>
```

Personally I use Tailwind CSS for most of my work unless we have a dedicated UI design team to supply our styles, so
this code above is from the official NextJS docs.

## Loading UI
With the routing changes in NextJS there was also the file convention change which I spoke a little about up above. But
something that NextJS didn't do that you could
do in a CSR app was loading components. Users want to see the UI rendered fast, and the longer they wait the less
interested they will be on staying on your site or returning in future.
NextJS's changes to the file system mean that you can specify a `loading.tsx` file alongside the component you want to
render and NextJS will handle the state rendering. This is useful if
you are loading larger items like images or backend data that takes a little longer than the rest of the page to render.

``` 
├── app
   ├── layout.tsx
   ├── page.tsx
   └── products
     ├── layout.tsx
     ├── loading.tsx
     └── page.tsx
```

Inside the loading.tsx you can use you own custom compnents just like you usually would

```typescript jsx
export default function Loading() {
    return <LoadingComponent/>
}
```

## Client Side Rendering
Previously in NextJS 12 everything was SSR. But with the NextJS 13 we can make a component Client Side Render by
adding `use client` at the top of the file

```typescript jsx
"use client"

export default LinkedItems()
{
    return <div className="linked-items">
        ...
    </div>
}

```

This is a great improvement for any dynamic rendering we want to do in dashboard or other situations where you want a
quick load and then populate other sections of the page post-render.

## No more getServerSideProps
This was something that I found annoying. Every time a server side call was required, the getServerSideProps function had to be used. 
It's still available to use if you want to but now there is a much simpler way to do it, and something that those who write CSR apps will be used to.

```typescript jsx
async function getProducts() {
    const res = await fetch('https://localhost:3000/getProducts');
    const data = await res.json();

    return data?.items as Product[];
}

export default async function Products() {
    const products = await getProducts();

    return <div>
        {products?.map(product => <div>{product.name}</div>)}
        ...
    </div>
}
```
There's so much more to talk about on this, so check out the docs on the NextJS site to read more and get your next project 
started with it: [https://beta.nextjs.org/docs/](https://beta.nextjs.org/docs/)

Welcome to NextJS 13

When the React team released hooks in early 2019, many developers were scratching their heads. The reason behind hooks was hard for some to understand. At that time I was working on a project with a Microsoft backend and a TypeScript/React front-end and we were using Redux to handle all the state management.

Hooks weren't really accepted in the team I was in. We already had most of the project complete and to add a new dimension into it which some didn't really want wasn't going to go down well. Thankfully it wasn't long till I picked up my new project and I was there to start the frontend from scratch.

That's where I could do what I like, but one of the biggest headaches was how the rendering would affect hooks and especially useEffect. Relying on the observed dependancies meant that we would have quite a few issues with multiple calls at times we didn't even want them to happen. But the biggest issue came when another developer made a crucial error with the useEffect hook.

That error was that they were making a call to an endpoint, but when they wrote up the code for it, they followed their IDEs suggestion to remove the dependancies array as it was empty and wasn't being used. This caused the call to happen repeatedly, and they weren't aware it was happening. About 30 minutes later we got a call from the DevOps team to say that there were hundreds of thousands of calls happening. 

	    useEffect(() ->{
		    const data = useProductList(categoryId);
		    setProducts(data);
	    });

We quickly found the issue, and fixed it but it still felt like the way we were using useEffect for our API calls was archaic. That's when we found ReactQuery (now TanStack Query so we'll call it that from now on).

TanStack Query is a library dedicated to state management, server-state management and data fetching. The reason it's now TanStack Query is because not only supports React but also SolidJS, Vue and Svelte. The benefit to using it over useEffect for us was that it not only allowed a really readable code trace, but it also allowed us a really granular way to manage all those requests with the cache options.

So how do we get started with TanStack Query? Well the first thing to do is to get the QueryClientProvider setup. It sits at the top of the app stack and it manages all the calls and the cache for the whole app. 

	    <QueryClientProvider client={queryClient}>
	    	<Component {...pageProps} />
	    </QueryClientProvider>

When you make a query it records it and tracks it's status. When you change something, it can manage the cache and recall any query that has been modified. When a cache times out it will call it again if it's in scope.

To make a basic query is very simple.

    const {data} = useQuery('product-list', getProducts);
 
This will save the data call with the key 'product-list' in the cache and assign it a default timeout. If the call happens again before the cache expires, it'll come straight from the cache, saving you a call to the backend and speeding up your application.

You can specify this in more detail using the options variable, and get more back from the query.

    const {data:products, isLoading, error} = useQuery({
										    queryKey: 'product-list',
										    queryFn: getProducts
									    });
From there you can now have some control over your UI when the fetch is happening. With the isLoading you can show your users that the data is being fetched, and when `isLoading` is false you can show your data or act on errors returned.

TanStack Query is also great for CRUD operations. Using the `mutate` operator you can add a record to your backend.

    const mutation = useMutate({
	    mutationFn: (newProduct) => {
		    return fetch('/api/addProduct/', product);
	    },
	    onSuccess: (data:addedProduct) => {
		    queryClient.setQueryData(['product-', addedProduct.id], addedProduct);
		    navigate(`/product/${addedProduct.id}`};
	    }
    });

Here we add a new product, and the `onSuccess` returns the data we passed. We then add this product to our cache before we navigate to the individual product page. When we get to the product page TanStack populates the data from the cache that we just added and we save a call to the backend.

So reading and writing with TanStack is a very refreshing experience. Everything is managed for you, your app is speedy and you're not going to be trying to explain to your client/boss why there were half a million calls to the API in a short space or time. 

There are also lots of other functionalities in the TanStack library. I'll write more about them in the future but until then you should checkout TanStack and see what it's all about. [https://tanstack.com/query/](https://tanstack.com/query/)
 

Why I put useEffect in the bin

In React, there are times when we need to perform some expensive computations or function calls, especially when rendering complex components. This can lead to performance issues, as the computation has to be re-executed every time the component is re-rendered, even if the input parameters remain the same. To solve this problem, React provides a hook called useMemo.

useMemo is a hook that allows you to memoize the results of an expensive function call, and only recompute the result if the input parameters have changed. The basic syntax for useMemo is as follows:

```jsx
const memoizedValue = useMemo(() => {
// expensive function call or computation
return result;
}, [input1, input2]);
```
The first argument to useMemo is a function that computes the value that needs to be memoized. The second argument is an array of input values that the function depends on. If any of the input values change, the memoized value will be recomputed.
Let's take an example to understand how useMemo works in practice. Consider a component that renders a list of numbers and their squares:

```jsx
function NumberList({ numbers }) {
return (
    <ul>
    {numbers.map((num) => (
        <li key={num}>
            {num} squared is {num * num}
        </li>
    ))}
    </ul>
    );
}
```

This component works fine for small lists, but can become slow for large lists as the computation of squares is done every time the component is rendered. To solve this, we can use useMemo to memoize the computation of squares:

```jsx
function NumberList({ numbers }) {
    const squares = useMemo(() => {
        return numbers.map((num) => num * num);
    }, [numbers]);

    return (
        <ul>
            {numbers.map((num, index) => (
                <li key={num}>
                    {num} squared is {squares[index]}
                </li>
            ))}
        </ul>
    );
}
```

In this example, we use useMemo to memoize the computation of squares. The squares array is only recomputed when the numbers array changes. As a result, the component renders faster and performs better.

In summary, useMemo is a useful hook for optimizing the performance of your React components. It allows you to memoize expensive computations and function calls, and only recompute the result if the input parameters have changed. By using useMemo, you can ensure that your components render quickly and efficiently, even for large or complex data sets.


When to use useMemo

Redux has been something that I've seen on job descriptions for a long time. Some developers tell me it's the only
acceptable option, other tell me it's not an option at all. Is it a Marmite state management tool?

Well we are going to look into what Redux is and what it's advantages and disadvantages are.

## Why Redux?

Redux is a JavaScript library for managing and centralising an application's state. It was
created in 2015 by Dan Abramov and Andrew Clark. Abramov himself worked at Facebook, so when
discovered this library I was tempted to it by the fact it was coming from Facebook employees themselves.

There are alternatives like MobX and Recoil that provide a similar state management. But Redux get a fair amount of
coverage. So when you are looking for examples of how to implement and use Redux, you're going to be able to find a lot
of examples on StackOverflow, Medium and other article sites.

## Redux setup

With Redux, there is quite a bit of code setup required. First is your store. This is where you'll be putting all the
state.

```typescript jsx
//app.tsx
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import rootReducer from './reducers';
import App from './components/App';

const store = createStore(rootReducer);

render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);
```

In the code example above the store is created and supplied to a `<Provider />` element from `react-redux`
that wraps round the whole `<App />`.

Next you're going to need some middleware to deal with handling store access asynchronously. Redux
suggests `redux-thunk`.
To implement this middleware is going to be a lot of code for something you will rarely change. You're also going to be
refining your `rootReducer` here which handles all the calls to alter the store state.

```typescript jsx
//configureStore.ts
import {applyMiddleware, compose, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';

import monitorReducersEnhancer from './enhancers/monitorReducers';
import loggerMiddleware from './middleware/logger';
import rootReducer from './reducers';

export default function configureStore(preloadedState) {
    const middlewares = [loggerMiddleware, thunkMiddleware];
    const middlewareEnhancer = applyMiddleware(...middlewares);

    const enhancers = [middlewareEnhancer, monitorReducersEnhancer];
    const composedEnhancers = compose(...enhancers);

    const store = createStore(rootReducer, preloadedState, composedEnhancers);

    return store;
}
```

## Action Creators

To make changes to your state, you're going to need Actions (or Action Creators here). When you
dispatch a request the state management will be looking for your type to work out what you want to do.

```typescript jsx
{
    type: 'ADD_PRODUCT', product
:
    {...
    }
}
{
    type: 'REMOVE_PRODUCT', productId
:
    1
}
```

## Reducers

The Actions will then be inspected by the Reducers. You have one rootReducer for your whole state, where you can then
bring in your specific reducers. You could put it all in one but the code base is getting big enough already to be
confusing.

```typescript jsx
// rootReducer.ts
export const rootReducer: Reducer<IStoreState, Actions> = combineReducers({
    cartState: reduceCartState,
});
```

And then you have your specific reducers. Here it's my standard cart example.

```typescript jsx
// cartReducer.ts
import {Reducer} from "react";

const initialState: CartState = {
    items: []
};

export const reduceCartState: Reducer<CartState, CartActions>
createReducer({}, {
    [ActionTypes.ADD_PRODUCT]: (state, action) => {
        const cart = addProduct(action);
        return {...state, items: cart};
    },
    [ActionTypes.REMOVE_PRODUCT]: (state, action) => {
        const cart = removeItem(action)
        return {...state, items: cart};
    }
})
```

So in this cartReducer it's looking for the two action types and then acting on what is passed through. Functions
defined to take the current state and add or remove a product. Those functions are omitted here but easy to implement.

## Conclusion

The code above it a simple example of setting up a state with a simple add remove. It's a lot of code to get started
with. It's not particularly readable because you're going to be jumping from actions to reducers to state files. If you
try out the devtools that come with Redux it can show you the state, the history of the state, and what actions are
being called, but it is quite a pain when you want to change things, and with TypeScript you'd hope that there would be
some helpful errors to point out your errors, but not with Redux (at the time of writing this).

Other newer libraries like ReactQuery can manage these types of state management with simple calls. Viewing the state is
as easy and Redux using the devtools supplied, and mutating the state is much easier. It also has type safety (like
Redux) and supports Vue, Solid and Svelte.

But on the positives of Redux, it will hold you to doing things the way you've set them up. You're not going to find
yourself with state in the wrong place. You're not going to be fixing bugs for missing data that you end up wasting
hours trying to figure out. If you set up your test library using the full mocked state ,you're also going to find a
good trace of problems when the runner is doing its job.

If a project had Redux on it, I'd be happy to use it. But if a project needed state management I'd recommend an
alternative.
