Learning Redux with React JS
Getting Started with React and Redux
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.
Installation
Redux Toolkit
Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
RTK includes utilities that help simplify many common use cases, including store setup, creating reducers and writing immutable update logic, and even creating entire “slices” of state at once.
Whether you’re a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.
Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:
# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit
Create a React Redux App
The recommended way to start new apps with React and Redux is by using the official Redux+JS template for Create React App, which takes advantage of Redux Toolkit and React Redux’s integration with React components.
npx create-react-app my-app — template redux
Redux Core
The Redux core library is available as a package on NPM for use with a module bundler or in a Node application:
# NPM
npm install redux
# Yarn
yarn add redux
It is also available as a precompiled UMD package that defines a window.Redux global variable. The UMD package can be used as a [<script>](https://unpkg.com/redux/dist/redux.js) tag directly.
For more details, see the Installation page.
Follow My Training sessions to get More on React and Redux
