Redux

[Abhishek-VG]

Redux is a pattern and a library for organising global state in ur app outside the react component tree

redux can be used with any UI library like react angular @readuxjs/toolkit is redux library

react-redux is used to connect redux and react app

you have to install 2 libraries, in order to work with redux npm i @reduxjs/toolkit react-redux

link for a demo = https://codesandbox.io/s/distracted-morning-mdrbz2?file=/src/App.js

[Abhishek-VG]

https://codesandbox.io/s/cool-zeh-hr6cm4?file=/src/page/counter/inputField.js:225-242

[Abhishek-VG]

Daily scrum - stand-up call (tyb-yiap-wcg - Apr 10, 2022).pdf )

[Abhishek-VG]

Libraries required

@reduxjs/toolkit React-redux

• reduxjs/toolkit contains redux related functions

• React-redux connects redux and react using api like useDispatch useSelector, Provider apis

how to code (4 steps)

1. store.js

- U need a store.
- Store contains all the state of components.

When u create a store, u need to have reducers (exported from slice files)

U have to add exported reducer from slice file to this page

2. Slice file

• For every component u need to create slice (slice is a chunk of component's state)

CreateSlice takes one argument, which is object

           This object will have
       1. name
       2. InitialState
       3. Reducers   -  Which holds Action functions inside ,these functions will help 
                                 updating the store value

> In slice u have to export 2 things
1. Actions (used by importing in component for updating value)
2. Reducer(used to register to the store in store.js)

3. In component

    U have to do 2 things
   Get value from store
   Update value to the store

To get value from the store, you use useSelector from react-redux

To update value into the store, use action functions returned from slice file

4. Final but very important

Redux work using context api

So import provider from react-redux at the root of the application (example App.js)

And import store from store.js

Add store prop into the provider