Notes on React Redux

Last updated on 4 Dec. 2024


React Redux Full Course for Beginners | Redux Toolkit Complete Tutorial, https://www.youtube.com/watch?v=NqzdVN2tyvQ , around 4 hrs, by Dave Gray, May 2022. Source code: https://github.com/gitdagray/react_redux_toolkit


[createReducer()] Usage with the "Builder Callback" Notation, https://redux-toolkit.js.org/api/createReducer#usage-with-the-builder-callback-notation

Array.prototype.reduce(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce : The reduce() method of Array instances executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
---------
Above medium.com article takes a simple example of a reducer and step-by-step builds on it with later/final version being close to how Redux uses reducers.
==========

The Object.freeze() static method freezes an object. Freezing an object prevents extensions and makes existing properties non-writable and non-configurable. A frozen object can no longer be changed: new properties cannot be added, existing properties cannot be removed, their enumerability, configurability, writability, or value cannot be changed, and the object's prototype cannot be re-assigned. freeze() returns the same object that was passed in.
---------

==========

The word "thunk" is a programming term that means "a piece of code that does some delayed work". Rather than execute some logic now, we can write a function body or code that can be used to perform the work later.

For Redux specifically, "thunks" are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch and getState methods.
...
Thunks are best used for complex synchronous logic, and simple to moderate async logic such as making a standard AJAX request and dispatching actions based on the request results.
-----
Above article's section: Using createAsyncThunk, https://redux.js.org/usage/writing-logic-thunks#using-createasyncthunk


Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit, https://redux.js.org/tutorials/fundamentals/part-8-modern-redux : Covers how redux-toolkit simplifies redux programming.
===================

4 Dec. 2024:

React Redux Full Course for Beginners | Redux Toolkit Complete Tutorial, https://youtu.be/NqzdVN2tyvQ?t=5645
lessons 1, 2 & 3 (async thunk) covered. 

Tha above video is "Based on the "Redux Essentials" tutorial in the official Redux Toolkit docs by Mark Erikson with some project additions and modifications along the way: " https://redux.js.org/tutorials/essentials/part-1-overview-concepts . 

Browsed through above redux.js.org 'essentials' tutorial. Seems to be good but has lot of stuff and so will take time to go through.

Functional Programming: Pure and Impure Functions, https://www.geeksforgeeks.org/functional-programming-pure-and-impure-functions/ . It has clear explanation with example code.

Switching Between Yarn and NPM, https://ncoughlin.com/posts/switching-yarn-npm :
If you want to switch from Yarn to NPM follow these steps.

delete the node_modules folder
delete the yarn.lock file
run npm install
---------

Used the above to change official redux essentials tutorial to npm from yarn (had to delete some other yarn files & folder too having yarn as part of its name). node_modules had not got created with the command specified by the tutorial:
npx degit reduxjs/redux-templates/packages/rtk-app-structure-example my-app

npm install created node_modules and package-lock.json
Then 'npm start' started the app which worked as expected.

--------------

React Query (TanStack Query), https://tanstack.com/query/latest/docs/framework/react/overview : "TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze." 

Comments

Post a Comment