Redux is both a powerful and widely used global state library. While Redux usage in React has historically been split between two packages (“redux” and “react-redux”), the Redux maintainers have introduced a new package to help reduce boilerplate called “Redux Toolkit”. Redux Toolkit is the official way to build new Redux applications.
To use Redux with React, you’ll need to start with the React and Babel template that’s provided in CoderPad. Once there, you’ll need to add the CDN for Redux, React Redux, and Redux Toolkit. These libraries will be available as global variables “Redux”, “ReactRedux” and “RTK” respectively.
Code language: HTML, XML (xml)
<html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://email@example.com/umd/react.production.min.js"></script> <script src="https://firstname.lastname@example.org/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@email@example.com/babel.min.js"></script> <script src="https://unpkg.com/@firstname.lastname@example.org/dist/redux-toolkit.umd.min.js"></script> <script src="https://email@example.com/dist/redux.js"></script> <script src="https://firstname.lastname@example.org/dist/react-redux.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> console.log(RTK); console.log(ReactRedux); console.log(Redux); </script> </body> </html>
For a look at how RTK can be used in a small example, here’s the default RTK code sample in CoderPad