React With Redux and Zustand

Developed the video player project to learn React with Redux and Zustand.

Four branches were created for the purpose of study:

To study Redux, access the following branches:
- "redux-todo": In this branch, the implementation of Redux with a to-do list is found, showcasing the basic concepts. The Redux Provider was created in App.tsx, and the store configuration was set up in index.ts. A "slice" was also created within the reducers, containing functions like "add". Additionally, "useSelector" was used to retrieve items from the to-do list, while "useDispatch" was employed to perform updates.
- "redux-player-without-api": In this branch, the implementation of Redux without the use of an API is demonstrated, focusing on a video player project. The "slice" was separated, and functions within the reducers were created, along with tests using "vitest".
- "redux-player-with-api": In this branch, the implementation of Redux with an API is showcased in the video player project. Interfaces were created, and the use of Async Thunk to perform asynchronous queries in Redux was learned.
To study Zustand, access the branch:
- "main": In this branch, Zustand and all its functionalities were integrated into the video player project.

🧭 Table of contents

React.with.Redux.and.Zustand.mp4

Clone the project

  git clone https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite.git

Enter the project directory

  cd react-with-redux-and-zustand-ignite

Install with dependencies

  npm install

Start the server

  # Run Server:
  npm run server

  # Run Web:
  npm run dev

  # Run test:
  npm run test
  npm run test:watch

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
public		public
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
server.json		server.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts