Redux set up

[AlexisTercero55]

• [x] Install Redux modules and pluggins.
• [x] Write a Redux counter example.
• [x] Perfom Redux running tests.

[AlexisTercero55]

Redux set up

[AlexisTercero55]

Redux set up based on Installation guide

"dependencies": {
    "@reduxjs/toolkit": "^1.9.2",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }

[AlexisTercero55]

Reading

Getting Started with Redux

[AlexisTercero55]

How Redux works

The whole global state of your app is stored in an object tree inside a single store.

The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store.

To specify how state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.

import { createStore } from 'redux'

/**
 * Reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 */
function anyReducer(state, action) => newState;

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(anyReducer);

Decentralized state Redux management

In a typical Redux app, there is just a single store with a single root reducing function.

As your app grows, you split the root reducer into smaller reducers independently operating on the different parts of the state tree.

This is exactly like how there is just one root component in a React app, but it is composed out of many small components.

[AlexisTercero55]

Counter app setup

Based on Redux Toolkit React Counter App

[AlexisTercero55]

Follow these steps for setting up Counter app.

• [x] Create a Redux Store
• [x] Provide the Redux Store to React Main App.js
• [x] Create a Redux State Slice
• [x] Add Slice Reducers to the Store
• [x] Use Redux State and Actions in React Component
• [x] To use redux state in other component use useSelector hook from react-redux.

[AlexisTercero55]

Redux Toolkit implementation for Counter App

Store creation

https://github.com/AlexisTercero55/react-bootstrap-vite/blob/ede5ffaed1fb75065ae7f25535aad5469ad42a01/src/store/store.js#L23

Slice creation

https://github.com/AlexisTercero55/react-bootstrap-vite/blob/ede5ffaed1fb75065ae7f25535aad5469ad42a01/src/features/counterSlice.js#L23

[AlexisTercero55]

Review test requirements

• [x] Test based on Redux Toolkit devTools from configureStore
• [x] Use Redux DevTools extension. Its docs comes from redux-devtools github repo.

<img src="https://user-images.githubusercontent.com/87354316/219885248-9ac7a70a-c71d-4b2a-bccc-e20eb3b0dded.svg" alt="Redux" height="400"/>

[AlexisTercero55]

Redux basic testing