Scribd
Upload
19 views

Redux Logic

Redux is a state management library for JavaScript apps that provides a centralized store to manage application state predictably. Actions describe state changes and are passed to reducers, which update the state immutably. Types define action constants. Example files demonstrate creating actions and reducers, setting up the store with middleware, selecting state, and dispatching actions from React components.

Uploaded by

Balaji TA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Redux Logic

Redux is a state management library for JavaScript apps that provides a centralized store to manage application state predictably. Actions describe state changes and are passed to reducers, which update the state immutably. Types define action constants. Example files demonstrate creating actions and reducers, setting up the store with middleware, selecting state, and dispatching actions from React components.

Uploaded by

Balaji TA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Redux Overview:

Redux is a state management library for JavaScript apps, providing a centralized store to
manage the state of your application predictably and consistently.

Actions:
Actions are plain JavaScript objects that describe what happened in the application. They
usually have a type and payload.

Reducers:
Reducers are pure functions that take the current state and an action as arguments, and return
a new state. They specify how the application's state changes in response to actions.

Store:
The store is the object that brings actions and reducers together.

Types:
Types are constants that define the type of actions. They help avoid typos and make the code
more maintainable.

Action File(userActions.js) :

import { ADD_USER } from '../types';

export const addUser = (user) => ({


type: ADD_USER,
payload: user,
});

Reducer File(userReducer.js) :

import { ADD_USER } from '../types';

const initialState = {
users: [],
};

const userReducer = (state = initialState, action) => {


switch (action.type) {
case ADD_USER:
return {
...state,
users: [...state.users, action.payload],
};
default:
return state;
}
};

export default userReducer;

Store.js:
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import userReducer from './reducers/userReducer';

const rootReducer = combineReducers({


user: userReducer,
});

const middleware = [thunk];

const store = createStore(


rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Type File(type.js):
export const ADD_USER = 'ADD_USER';

Component File(helloComponent):

import React from 'react';


import { useDispatch, useSelector } from 'react-redux';
import { addUser } from './redux/actions/userActions';

const SomeComponent = () => {


const dispatch = useDispatch();
const users = useSelector(state => state.user.users);

const handleAddUser = () => {


const newUser = { name: 'John Doe' };
dispatch(addUser(newUser));
};

return (
<div>
<button onClick={handleAddUser}>Add User</button>
<ul>
{users.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
</div>
);
};

export default SomeComponent;


KeyWords:
userActions.js defines an action creator addUser that creates an action to add a user.
userReducer.js handles the action and updates the state by adding a new user.
store.js sets up the Redux store with the user reducer and middleware.
types.js defines the action type constant to avoid typos.
SomeComponent.jsx demonstrates how to dispatch actions and select state from the store
using React-Redux hooks.

In case we are handling apis:(we have to handle like this)


import { FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE }
from './types';

export const fetchUser = () => async (dispatch) => {


dispatch({ type: FETCH_USER_REQUEST });

try {
const response = await fetch('https://api.example.com/users');
const data = await response.json();

dispatch({ type: FETCH_USER_SUCCESS, payload: data });


} catch (error) {
dispatch({ type: FETCH_USER_FAILURE, payload: error.message });
}
};

You might also like