├── .gitignore ├── README.md ├── package.json └── FIles ├── middleware.js ├── payload.js ├── index.js ├── reduxthunk.js └── combine.js /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # basic-redux 2 | 3 | Learning Redux 4 | With Love 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-basic", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "redux": "^4.2.0", 14 | "redux-logger": "^3.0.6" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /FIles/middleware.js: -------------------------------------------------------------------------------- 1 | const { createStore, applyMiddleware } = require("redux"); 2 | const { default: logger } = require("redux-logger"); 3 | 4 | // product constants 5 | const GET_PRODUCTS = "GET_PRODUCTS"; 6 | const ADD_PRODUCTS = "ADD_PRODUCTS"; 7 | 8 | // product states 9 | const initialProductState = { 10 | products: ["sugar", "salt"], 11 | numberOfProducts: 2, 12 | }; 13 | 14 | // product actions 15 | const getProductAction = () => { 16 | return { 17 | type: GET_PRODUCTS, 18 | }; 19 | }; 20 | const addProductAction = (product) => { 21 | return { 22 | type: ADD_PRODUCTS, 23 | payload: product, 24 | }; 25 | }; 26 | 27 | const productsReducer = (state = initialProductState, action) => { 28 | switch (action.type) { 29 | case GET_PRODUCTS: 30 | return { 31 | ...state, 32 | }; 33 | case ADD_PRODUCTS: 34 | return { 35 | products: [...state.products, action.payload], 36 | numberOfProducts: state.numberOfProducts + 1, 37 | }; 38 | 39 | default: 40 | return state; 41 | } 42 | }; 43 | 44 | const store = createStore(productsReducer, applyMiddleware(logger)); 45 | 46 | store.subscribe(() => { 47 | console.log(store.getState()); 48 | }); 49 | 50 | store.dispatch(getProductAction()); 51 | store.dispatch(addProductAction("Masala")); 52 | -------------------------------------------------------------------------------- /FIles/payload.js: -------------------------------------------------------------------------------- 1 | // What is Payload ? 2 | // Lets Know What Payload Does? 3 | // Basically The Payload receive a initial value which can be controlled by the state as we want to do 4 | 5 | // Lets Make a Counter App Functionality Using Redux 6 | // What we need to do the task? 7 | 8 | const { createStore } = require("redux"); 9 | 10 | // State - count:0 11 | // action -> increment, decrement, reset 12 | // Reducer 13 | // Store 14 | 15 | // Global Varriables 16 | const ADD_USER = "ADD_USER"; 17 | 18 | // Initial State 19 | const myUsers = { 20 | user: ["Salam Sheikh"], 21 | totalUser: 1, 22 | }; 23 | 24 | // Action Function 25 | const addUser = (user) => { 26 | return { 27 | type: ADD_USER, 28 | payload: user, 29 | }; 30 | }; 31 | 32 | // Reducer Functionality which is work on our logic 33 | 34 | const userReducer = (state = myUsers, action) => { 35 | switch (action.type) { 36 | case ADD_USER: 37 | return { 38 | user: [...state.user, action.payload], 39 | totalUser: state.totalUser + 1, 40 | }; 41 | 42 | default: 43 | state; 44 | } 45 | }; 46 | 47 | // Have to Store the all states in somewhere, in that case we are using store 48 | 49 | const store = createStore(userReducer); 50 | store.subscribe(() => { 51 | console.log(store.getState()); 52 | }); 53 | 54 | // If we want to See Output at the console log then we have to dispatch the store variable 55 | 56 | store.dispatch(addUser("Safwan Al Safi")); 57 | store.dispatch(addUser("Md Selim Mia")); 58 | store.dispatch(addUser("Salma Akter")); 59 | store.dispatch(addUser("Sirajul Islam")); 60 | store.dispatch(addUser("Samsun Nahar")); 61 | store.dispatch(addUser("Sakhera Banu")); 62 | -------------------------------------------------------------------------------- /FIles/index.js: -------------------------------------------------------------------------------- 1 | // Lets Make a Counter App Functionality Using Redux 2 | // What we need to do the task? 3 | 4 | const { createStore } = require("redux"); 5 | 6 | // State - count:0 7 | // action -> increment, decrement, reset 8 | // Reducer 9 | // Store 10 | 11 | // Global Varriables 12 | const INCREMENT = "INCREMENT"; 13 | const DECREMENT = "DECREMENT"; 14 | const RESET = "RESET"; 15 | 16 | // Initial State 17 | const counterInitialState = { 18 | count: 5, 19 | }; 20 | 21 | // Making Different Kind of Action For all Functionality 22 | const incrementAction = () => { 23 | return { 24 | type: INCREMENT, 25 | }; 26 | }; 27 | const decrementAction = () => { 28 | return { 29 | type: DECREMENT, 30 | }; 31 | }; 32 | const resetAction = () => { 33 | return { 34 | type: RESET, 35 | }; 36 | }; 37 | 38 | // Reducer Functionality which is work on our logic 39 | 40 | const counterReducer = (state = counterInitialState, action) => { 41 | switch (action.type) { 42 | case INCREMENT: 43 | return { 44 | ...state, 45 | count: state.count * 5, 46 | }; 47 | case DECREMENT: 48 | return { 49 | ...state, 50 | count: state.count / 5, 51 | }; 52 | case RESET: 53 | return { 54 | ...state, 55 | count: 5, 56 | }; 57 | 58 | default: 59 | state; 60 | } 61 | }; 62 | 63 | // Have to Store the all states in somewhere, in that case we are using store 64 | 65 | const store = createStore(counterReducer); 66 | store.subscribe(() => { 67 | console.log(store.getState()); 68 | }); 69 | 70 | // If we want to See Output at the console log then we have to dispatch the store variable 71 | store.dispatch(incrementAction()); 72 | store.dispatch(incrementAction()); 73 | store.dispatch(incrementAction()); 74 | store.dispatch(incrementAction()); 75 | store.dispatch(decrementAction()); 76 | store.dispatch(resetAction()); 77 | -------------------------------------------------------------------------------- /FIles/reduxthunk.js: -------------------------------------------------------------------------------- 1 | // Global Variables 2 | 3 | const { default: axios } = require("axios"); 4 | const { createStore, applyMiddleware } = require("redux"); 5 | const thunk = require("redux-thunk").default; 6 | 7 | const GET_TODOS_REQUEST = "GET_TODOS_REQUEST"; 8 | const GET_TODOS_SUCCESS = "GET_TODOS_SUCCESS"; 9 | const GET_TODOS_FAILED = "GET_TODOS_FAILED"; 10 | const API_URL = "https://jsonplaceholder.typicode.com/todos"; 11 | 12 | // States 13 | const initialTodosState = { 14 | todos: [], 15 | isLoading: false, 16 | error: null, 17 | }; 18 | 19 | // Actions 20 | 21 | const getTodosRequest = () => { 22 | return { 23 | type: GET_TODOS_REQUEST, 24 | }; 25 | }; 26 | 27 | const getTodosSuccess = (todos) => { 28 | return { 29 | type: GET_TODOS_SUCCESS, 30 | payload: todos, 31 | }; 32 | }; 33 | 34 | const getTodosFailed = (error) => { 35 | return { 36 | type: GET_TODOS_FAILED, 37 | payload: error, 38 | }; 39 | }; 40 | 41 | // Reducers 42 | const todosReducers = (state = initialTodosState, action) => { 43 | switch (action.type) { 44 | case GET_TODOS_REQUEST: 45 | return { 46 | ...state, 47 | isLoading: true, 48 | }; 49 | case GET_TODOS_SUCCESS: 50 | return { 51 | ...state, 52 | isLoading: false, 53 | todos: action.payload, 54 | }; 55 | case GET_TODOS_FAILED: 56 | return { 57 | ...state, 58 | isLoading: false, 59 | error: action.payload, 60 | }; 61 | 62 | default: 63 | return state; 64 | } 65 | }; 66 | 67 | // Functional Work of Redux Thunk 68 | const fetchData = () => { 69 | return (dispatch) => { 70 | dispatch(getTodosRequest()); 71 | axios 72 | .get(API_URL) 73 | .then((res) => { 74 | const todos = res.data; 75 | const titles = todos.map((todo) => todo.title); 76 | dispatch(getTodosSuccess(titles)); 77 | }) 78 | .catch((error) => { 79 | const errorMessage = error.message; 80 | dispatch(getTodosFailed(errorMessage)); 81 | }); 82 | }; 83 | }; 84 | 85 | // Stores 86 | const store = createStore(todosReducers, applyMiddleware(thunk)); 87 | store.subscribe(() => { 88 | console.log(store.getState()); 89 | }); 90 | 91 | store.dispatch(fetchData()); 92 | -------------------------------------------------------------------------------- /FIles/combine.js: -------------------------------------------------------------------------------- 1 | const { createStore, combineReducers } = require("redux"); 2 | 3 | // product constants 4 | const GET_PRODUCTS = "GET_PRODUCTS"; 5 | const ADD_PRODUCTS = "ADD_PRODUCTS"; 6 | 7 | // cart constants 8 | const GET_CART_ITEMS = "GET_CART_ITEMS"; 9 | const ADD_CART_ITEMS = "ADD_CART_ITEMS"; 10 | 11 | // product states 12 | const initialProductState = { 13 | products: ["sugar", "salt"], 14 | numberOfProducts: 2, 15 | }; 16 | 17 | // cart states 18 | const initialCartState = { 19 | cart: ["sugar"], 20 | numberOfProducts: 1, 21 | }; 22 | 23 | // product actions 24 | const getProductAction = () => { 25 | return { 26 | type: GET_PRODUCTS, 27 | }; 28 | }; 29 | const addProductAction = (product) => { 30 | return { 31 | type: ADD_PRODUCTS, 32 | payload: product, 33 | }; 34 | }; 35 | 36 | // cart actions 37 | const getCartAction = () => { 38 | return { 39 | type: GET_CART_ITEMS, 40 | }; 41 | }; 42 | const addCartAction = (product) => { 43 | return { 44 | type: ADD_CART_ITEMS, 45 | payload: product, 46 | }; 47 | }; 48 | 49 | const productsReducer = (state = initialProductState, action) => { 50 | switch (action.type) { 51 | case GET_PRODUCTS: 52 | return { 53 | ...state, 54 | }; 55 | case ADD_PRODUCTS: 56 | return { 57 | products: [...state.products, action.payload], 58 | numberOfProducts: state.numberOfProducts + 1, 59 | }; 60 | 61 | default: 62 | return state; 63 | } 64 | }; 65 | 66 | const cartReducer = (state = initialCartState, action) => { 67 | switch (action.type) { 68 | case GET_CART_ITEMS: 69 | return { 70 | ...state, 71 | }; 72 | case ADD_CART_ITEMS: 73 | return { 74 | cart: [...state.cart, action.payload], 75 | numberOfProducts: state.numberOfProducts + 1, 76 | }; 77 | 78 | default: 79 | return state; 80 | } 81 | }; 82 | 83 | const rootReduer = combineReducers({ 84 | productR: productsReducer, 85 | cartR: cartReducer, 86 | }); 87 | 88 | const store = createStore(rootReduer); 89 | 90 | store.subscribe(() => { 91 | console.log(store.getState()); 92 | }); 93 | 94 | store.dispatch(getProductAction()); 95 | store.dispatch(addProductAction("pen")); 96 | store.dispatch(getCartAction()); 97 | store.dispatch(addCartAction("salt")); 98 | --------------------------------------------------------------------------------