chore: intial setup for Website

docs/introduction/getting-started.md

@@ -0,0 +1,150 @@
+---
+id: getting-started
+title: Getting Started with Angular Redux
+hide_title: true
+sidebar_label: Getting Started
+description: 'Introduction > Getting Started: First steps with Angular Redux'
+---
+
+ 
+
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
+# Getting Started with React Redux
+
+[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://react.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
+
+## Installation
+
+React Redux 8.x requires **React 16.8.3 or later** / **React Native 0.59 or later**, in order to make use of React Hooks.
+
+### Create a React Redux App
+
+The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
+
+Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
+
+```bash
+# Vite with our Redux+TS template
+# (using the `degit` tool to clone and extract the template)
+npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
+
+# Next.js using the `with-redux` template
+npx create-next-app --example with-redux my-app
+```
+
+We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
+
+- https://github.com/rahsheen/react-native-template-redux-typescript
+- https://github.com/rahsheen/expo-template-redux-typescript
+
+### An Existing React App
+
+To use React Redux with your React app, install it as a dependency:
+
+```bash
+# If you use npm:
+npm install react-redux
+
+# Or if you use Yarn:
+yarn add react-redux
+```
+
+You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
+
+React-Redux v8 is written in TypeScript, so all types are automatically included.
+
+## API Overview
+
+### `Provider`
+
+React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import { Provider } from 'react-redux'
+import store from './store'
+
+import App from './App'
+
+// As of React 18
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+ <Provider store={store}>
+ <App />
+ </Provider>,
+)
+```
+
+### Hooks
+
+React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
+
+`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
+
+```jsx
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+ decrement,
+ increment,
+ incrementByAmount,
+ incrementAsync,
+ selectCount,
+} from './counterSlice'
+import styles from './Counter.module.css'
+
+export function Counter() {
+ const count = useSelector(selectCount)
+ const dispatch = useDispatch()
+
+ return (
+ <div>
+ <div className={styles.row}>
+ <button
+ className={styles.button}
+ aria-label="Increment value"
+ onClick={() => dispatch(increment())}
+ >
+ +
+ </button>
+ <span className={styles.value}>{count}</span>
+ <button
+ className={styles.button}
+ aria-label="Decrement value"
+ onClick={() => dispatch(decrement())}
+ >
+ -
+ </button>
+ </div>
+ {/* omit additional rendering output here */}
+ </div>
+ )
+}
+```
+
+## Learning React Redux
+
+### Learn Modern Redux Livestream
+
+Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
+
+See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
+
+<LiteYouTubeEmbed 
+ id="9zySeP5vH9c"
+ title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
+/>
+
+## Help and Discussion
+
+The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
+
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
+
+## Docs Translations
+
+- [Portuguese](https://fernandobelotto.github.io/react-redux)

docs/tutorials/quick-start.md

@@ -0,0 +1,222 @@
+---
+id: quick-start
+title: Quick Start
+sidebar_label: Quick Start
+hide_title: true
+---
+
+ 
+
+# React Redux Quick Start
+
+:::tip What You'll Learn
+
+- How to set up and use Redux Toolkit with React Redux
+
+:::
+
+:::info Prerequisites
+
+- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+- Knowledge of React terminology: [JSX](https://react.dev/learn/writing-markup-with-jsx), [State](https://react.dev/learn/state-a-components-memory), [Function Components, Props](https://react.dev/learn/passing-props-to-a-component), and [Hooks](https://react.dev/reference/react#)
+- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)
+
+:::
+
+## Introduction
+
+Welcome to the React Redux Quick Start tutorial! **This tutorial will briefly introduce you to React Redux and teach you how to start using it correctly**.
+
+### How to Read This Tutorial
+
+This page will focus on just how to set up a Redux application with Redux Toolkit and the main APIs you'll use. For explanations of what Redux is, how it works, and full examples of how to use Redux Toolkit, see [the Redux core docs tutorials](https://redux.js.org/tutorials/index).
+
+For this tutorial, we assume that you're using Redux Toolkit and React Redux together, as that is the standard Redux usage pattern. The examples are based on [a typical Create-React-App folder structure](https://create-react-app.dev/docs/folder-structure) where all the application code is in a `src`, but the patterns can be adapted to whatever project or folder setup you're using.
+
+The [Redux+JS template for Create-React-App](https://github.com/reduxjs/cra-template-redux) comes with this same project setup already configured.
+
+## Usage Summary
+
+### Install Redux Toolkit and React Redux
+
+Add the Redux Toolkit and React Redux packages to your project:
+
+```sh
+npm install @reduxjs/toolkit react-redux
+```
+
+### Create a Redux Store
+
+Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+
+export default configureStore({
+ reducer: {},
+})
+```
+
+This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
+
+### Provide the Redux Store to React
+
+Once the store is created, we can make it available to our React components by putting a React Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
+
+```js title="index.js"
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+// highlight-start
+import store from './app/store'
+import { Provider } from 'react-redux'
+// highlight-end
+
+// As of React 18
+const root = ReactDOM.createRoot(document.getElementById('root'))
+
+root.render(
+ // highlight-next-line
+ <Provider store={store}>
+ <App />
+ </Provider>,
+)
+```
+
+### Create a Redux State Slice
+
+Add a new file named `src/features/counter/counterSlice.js`. In that file, import the `createSlice` API from Redux Toolkit.
+
+Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.
+
+Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
+
+```js title="features/counter/counterSlice.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+ name: 'counter',
+ initialState: {
+ value: 0,
+ },
+ reducers: {
+ increment: (state) => {
+ // Redux Toolkit allows us to write "mutating" logic in reducers. It
+ // doesn't actually mutate the state because it uses the Immer library,
+ // which detects changes to a "draft state" and produces a brand new
+ // immutable state based off those changes.
+ // Also, no return statement is required from these functions.
+ state.value += 1
+ },
+ decrement: (state) => {
+ state.value -= 1
+ },
+ incrementByAmount: (state, action) => {
+ state.value += action.payload
+ },
+ },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer
+```
+
+### Add Slice Reducers to the Store
+
+Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducer` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+// highlight-next-line
+import counterReducer from '../features/counter/counterSlice'
+
+export default configureStore({
+ reducer: {
+ // highlight-next-line
+ counter: counterReducer,
+ },
+})
+```
+
+### Use Redux State and Actions in React Components
+
+Now we can use the React Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
+
+```jsx title="features/counter/Counter.js"
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment } from './counterSlice'
+import styles from './Counter.module.css'
+
+export function Counter() {
+ const count = useSelector((state) => state.counter.value)
+ const dispatch = useDispatch()
+
+ return (
+ <div>
+ <div>
+ <button
+ aria-label="Increment value"
+ onClick={() => dispatch(increment())}
+ >
+ Increment
+ </button>
+ <span>{count}</span>
+ <button
+ aria-label="Decrement value"
+ onClick={() => dispatch(decrement())}
+ >
+ Decrement
+ </button>
+ </div>
+ </div>
+ )
+}
+```
+
+Now, any time you click the "Increment" and "Decrement buttons:
+
+- The corresponding Redux action will be dispatched to the store
+- The counter slice reducer will see the actions and update its state
+- The `<Counter>` component will see the new state value from the store and re-render itself with the new data
+
+## What You've Learned
+
+That was a brief overview of how to set up and use Redux Toolkit with React. Recapping the details:
+
+:::tip Summary
+
+- **Create a Redux store with `configureStore`**
+ - `configureStore` accepts a `reducer` function as a named argument
+ - `configureStore` automatically sets up the store with good default settings
+- **Provide the Redux store to the React application components**
+ - Put a React Redux `<Provider>` component around your `<App />`
+ - Pass the Redux store as `<Provider store={store}>`
+- **Create a Redux "slice" reducer with `createSlice`**
+ - Call `createSlice` with a string name, an initial state, and named reducer functions
+ - Reducer functions may "mutate" the state using Immer
+ - Export the generated slice reducer and action creators
+- **Use the React Redux `useSelector/useDispatch` hooks in React components**
+ - Read data from the store with the `useSelector` hook
+ - Get the `dispatch` function with the `useDispatch` hook, and dispatch actions as needed
+
+:::
+
+### Full Counter App Example
+
+Here's the complete Counter application as a running CodeSandbox:
+
+<iframe
+ class="codesandbox"
+ src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark&runonclick=1"
+ title="redux-essentials-example"
+ allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+ sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+## What's Next?
+
+We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit and React Redux do, and how to use it correctly.