Learning Redux with React JS

Learning Redux with React JS

·

2 min read

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