Redux & Redux Toolkit
/Beginner
What is Redux?
Definition
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.
Explain Like I'm New
Imagine a massive spreadsheet that holds all the data for your entire app (user info, shopping cart, theme color). Redux is that spreadsheet. Any component in your app can read from the spreadsheet, but to change the data, they have to submit an official 'request form'.
Real World Example
A banking system. The 'Store' is the vault holding your balance. You (the component) cannot just walk into the vault and change your balance to $1,000,000. You must hand a 'Deposit Slip' (an Action) to the 'Teller' (the Reducer), who follows strict rules to update the vault.
Common Use Cases
- •Large scale applications
- •Complex state logic
- •Apps with frequent state updates over time
Interactive Example
// The absolute simplest concept of Redux in plain JavaScript: let state = { count: 0 }; // You don't do this: // state.count = 5; (Unpredictable! Anyone can do this anywhere!) // You do this: function updateState(currentState, request) { if (request.type === 'ADD') { return { count: currentState.count + 1 }; } return currentState; }
Interview Questions
basic
- Is Redux only used with React?
intermediate
- What does it mean that Redux is 'predictable'?