Redux Tutorial | Redux tookits

 Folder  Structure

Packages

npm install redux react-redux @reduxjs/toolkit

index.js

configureStore()  method that simplifies the store setup process. 

reducer is a pure function that takes an action and the previous state of the application and return the new state.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import userReducer from './Features/user'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

// Creating the Redux store and configuring it with userReducer as the reducer
const store = configureStore({
  reducer: {
    user : userReducer
  }
})

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import './App.css';
import Login from './component/Login';
import Profile from './component/Profile';
function App() {
  return (
    <div className="App">
      {/* <h1>Hello world</h1> */}
      <Profile/>
      <Login/>
     
    </div>
  );
}
export default App;

component --> Login.js

useDisptach is used to modify value of your state and useSelector hook is used for accessing values of your states.

payload is a object containing the new value we want to set for user.

import React from 'react'
import { useDispatch } from 'react-redux'
import { login, logout } from '../Features/user'
const Login = () => {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => {
        dispatch(login({ name: "shreyash", age: 21, email: 'shreyashkolhe2001@gmail.com' }))
      }}>Login</button>
      <button onClick={() => {
        dispatch(logout())
      }}>LogOut</button>
    </div>
  )
}
export default Login

component --> Profile.js

import React from 'react';
import {useSelector} from 'react-redux'
function Profile () {
  const user = useSelector((state)=>state.user.value);
  // console.log(user)
  return (
    <>
        <h1>Profile page</h1>
        <p>Name : {user.name}</p>
        <p>Age : {user.age}</p>
        <p>Email {user.email}:</p>
    </>
  )
}
export default Profile

features --> user.js

slice  is a collection of Redux reducer logic and actions for a single feature in your app.

action.payload carries a payload of information from your application to store.

import { createSlice } from '@reduxjs/toolkit';
export const userSlice = createSlice({
    name: 'user',
    initialState: { value: { name: "", age: 0, email: "" } },
    reducers: {
        login: (state, action) => {
            state.value = action.payload
        },
        logout: (state, action) => {
            state.value = {name: "", age: 0, email: "" }
        }
    }
})
export const { login, logout } = userSlice.actions;

export default userSlice.reducer;

Add a Change Color Feature

component --> ChangeColor.js

import React, {useState} from 'react'
import {useDispatch} from 'react-redux'
import { changeColor } from '../Features/theme';
const ChangeColor = () => {
    const dispatch=  useDispatch();
    const[color, setColor] = useState('')
  return (
    <>
        <input onChange={(e)=>setColor(e.target.value)} type="text"/>
        <button onClick={()=>{
            dispatch(changeColor(color))
        }}>Change Color</button>
    </>
  )
}
export default ChangeColor

component --> Profile.js

useSelector hook is used to accessing values of your states.

import React from "react";
import { useSelector } from "react-redux";
function Profile() {
  const user = useSelector((state) => state.user.value);
  const themeColor = useSelector((state) => state.theme.value);
  return (
    <div style={{ color: themeColor }}>
      <h1> Profile Page</h1>
      <p> Name: {user.name} </p>
      <p> Age: {user.age}</p>
      <p> Email: {user.email}</p>
    </div>
  );
}
export default Profile;

Features --> theme.js

import { createSlice } from "@reduxjs/toolkit";
const initialStateValue = "";
export const themeSlice = createSlice({
  name: "theme",
  initialState: { value: initialStateValue },
  reducers: {
    changeColor: (state, action) => {
      state.value = action.payload;
    },
  },
});
export const { changeColor } = themeSlice.actions;
export default themeSlice.reducer;