keremdanismaz / Redux-Shops

React , Redux, Redux-Thunk, Hooks project example

Projenin Yükleme Aşaması Ve indirilmesi gereken npm packagelar

Öncelikle projemizin hangi isimde olmasını istiyorsak o isimde istediğimiz bir dizin de klosör açıyoruz.
Dosyamızı visual Stdio da açıyoruz.
Daha sonra npx create-react-app (projenin ismi) komutunu cmd de çalıştırıyoruz.
db.json yani sanal apimizi bir dosyanın içine atıyoruz.O dosyanın dizinini kopyalayıp cd (yapıştır)
json-server --watch db.json diyerek apimizi projemizde çalıştırıyoruz.
npm start diyerek proje çalıştırılır. Ve projemiz yayına alınmış oldu
npm i redux diyerek redux eklenir
np i react-redux denilerek react için redux kurulur.
npm i reactstrap diyerek bootstrapi kullanmak için yüklüyoruz.
npm i bootstrap diyerek de bootstrapi projeye dahil ediyoruz.
npm i react-thunk diyerek daha sonra thunk da bulunan applyMiddleware kullanmak için indiriyoruz.
fa iconunun linkini index.html e ekledik.
reactstrapi kullanmak için import 'bootstrap/dist/css/bootstrap.min.css'; diyerek bunu index.js e ekliyoruz.
Bir klosör yapısı oluşturuyoruz.içinde Component ve redux bulunduracak şekilde.

Kurulum sonucunda elde edilenler

• Kurulum sonucun da react,redux,react-redux,reactstrap,bootstrap ve fa icon kurulmuş oldu.
• Klosörleme işlemi yaptık ve gerekli yerlere gerekli importlar yapıldı.
• Dashboardın içinde category ve product bulunacak şekilde eklendi (product->col-9 , category-> col-3)
• Dashboard app in içinde container divi kullanılarak eklendi ayrıca naviyi de reacstrap ile etkinleştirip kullandık.

actionTypeların yazılması:

ActionType: Her Componentin bir işlevi ve görevi vardır. Örneğin category componenti için işlev , basıldığı an ürünlerin o categorye göre değişmesidir.
Bu gibi işlemleri tanımlamak için actionTypelar kullanılır ve bunları const ile tanımlarız daha sonra export ederiz.
Örnek bir tanımlama
export const CHANGE_CATEGORY = 'CHANGE_CATEGORY';

Actionların yazılması:

Action.type: içerisin de iki adet parametre barındırır. Birisi action.type az önce anlattığımız isimlendirmelerdi.
Action.payload: O aksyonun seçildiğinde alacağı değeri belirtir.
Örnek bir action yazılması (actionlar her component için ayrı ayrı yazılır.)
export function changeCategory(category){ return{ type: actionTypes.CHANGE_CATEGORY, payload:category } }

Reducerın Yazılması:

Redux: Redux daki en büyük olay bütün componentlerin verilere tek bir yerden ulaşabilmesidir.
Reducer: Ulaşılacak olan verilerin yani statlerin yönetilmesi konusun da yazılan koşullardır.
Seçilen aksyona göre yapılacak işlem yapılır ve yeni state oluşur daha sonra o state döndürülür.
Reducerlar genellikle swtich-case blokları arasına yazılır. Ve defaul değerini belirlemek için de bir başlangıç state durumu belirlenir.
Örnek bir initialState
export default { currentCategory: {} }
Örnek bir reducer yazılması (reducerlar her component için ayrı ayrı yazılır.)
export default function changeCategoryReducer( state = initialState.currentCategory, action ) { switch (action.type) { case actionTypes.changeCategory: return action.payload; default: state; } }

Redux Store Konfigurasyonu: (Combine Reducers)

Redux Store : reduxın içindeki actionları ve bu actionları kullnamamız için yazdığımız reducerı da kullanmak için bir mağaza (store) oluştumamız gerekmektedir. Daha sonra bu mağaza ile projemizi sarmallayacğız.
Combine Reducer : Yazdığımız bütün reducerları aynı çarı altında toplamak için kullanıdığımız bir metotdur.
Örnek bir combine reducer yazımı :
const rootReducer = combineReducers({ changeCategoryReducer: changeCategoryReducer // bütün reducerları aynı çatı altında combine ediyoruz. }); export default rootReducer;
ConfigureStore : Aynı çatı altında topladığımız reducerlar ile bir mağaza açıyoruz. Örnek bir mağaza oluşumu
import {createStore} from 'redux'; import rootReducer from './index';

export default function configureStore(){ return createStore(rootReducer)
}

Son olarak oluşturduğumuz mağazamızı kullanmak ve bu mağazayı tüm proje de kullanmak için uygulamamızın ana dizinin deki index dosyasını bu mağaza ile sarmallıyoruz.
import Provider from 'react-redux'; import configureStore from './redux/reducers/configureStore'; const store = configureStore();
Uygulamamız tamamen reduxa bağlanmış oldu.

Componentleri Store a Connect etme işlemi :

Oluşturmuş olduğumuz reduxı kullanmak için mapStateToPorps fonksyonu yazarak kullanıyoruz.
import {connect} from 'react-redux'; function mapStateToProps(state){ return{ currentCategory:state.changeCategoryReducer } } export default connect(mapStateToProps)(CategoryList)
Seçili Kategori :{this.props.currentCategory.categoryName}
Oluşan reducerdaki statei propsa aktarıyor ve orda kullanıyoruz.

Categorileri Bastırmak için yaptığımız işlemler:

Öncelikle bir fetch , post,put veya delete işlemi yapacağımızda yani bir action gerçekleştireceğimizde yapmamız gereken işlemler kurulumlardan sonra hep aynıdır.
1.Olarak CategoryActionsın içine categorileri getirecek olan fetch fonksyonunu yazıyoruz.
export function getCategories() { return function (dispatch) { let url = "http://localhost:3000/categories"; return fetch(url) .then((response) => response.json()) .then((result) => dispatch(getCategoriesSuccess(result))); };
Daha sonra bu yazdığımız kodu reducera gönderip state değiştirmeden önce payload ve action.type işlemleri için bir fonksyon daha yazıyoruz.

export function getCategoriesSuccess(categories) { return { type: actionTypes.GET_CATEGORIES_SUCCESS, payload: categories }; }
Ardından reducerda Action.type.GET_CATEGORIES_SUCCESS Olan durumu kullanmak için CategoryLİst adında bir reducer yazıyoruz.

import * as actionTypes from "../actions/actionTypes"; import initialState from "../reducers/initialState";

export default function changeCategoryReducer( state = initialState.categories, action ) { switch (action.type) { case actionTypes.GET_CATEGORIES_SUCCESS: return action.payload; default: return state; } }

Yeni bir reducer yazdığımız da onu hemen gidip tüm reducerları aynı çatı altına topladığımız Combine Reducer altında topluyoruz.
const rootReducer = combineReducers({ changeCategoryReducer: changeCategoryReducer,// bütün reducerları aynı çatı altında combine ediyoruz. categoryListReducer: categoryListReducer });

export default rootReducer;

Componentimizin içinde categoriler ile güncellediğimiz statei kullanmak için mapDispatchToProps fonksyonu yazıyoruz.
function mapDispatchToProps(dispatch) { return { actions: { getCategories: bindActionCreators(categoryAction.getCategories, dispatch), changeCategory:bindActionCreators(categoryAction.changeCategory, dispatch) }, }; }
Bu fonksyon bize en başta fetch ettiğimiz getcategory ismindeki fonksyonu çağırdı o da gidip actionTypes ları ve payloadu ayarladı ve sonra redux yazığımız reducer ile state i güncelledi. Onu prop olarak componentin proplarına geçirdik.
Tabi bu sırada thunkı da kullanmak için configureStore da bazı değişikler yaptık.
export default function configureStore(){ return createStore(rootReducer,applyMiddleware(thunk)); }
Componentin propsunu ilgili yerde reactstrap kullanarak bastırdık.

Put ve Post işlemlerini yapmak :

Herzaman ki gibi önce action Typlarını yazdık.
export const CREATE_PRODUCT_SUCCESS = 'CREATE_PRODUCT_SUCCESS'; export const UPTADE_PRODUCT_SUCCESS = 'UPTADE_PRODUCT_SU'
Daha sonra Actionları yazmamız gerekiyor.
export function saveProductApi(product) { // Post veya Put olarak (Ekle veya güncelle) işlemleri için talimat geldiğinde apşye haber veren fonksyon return fetch("http://localhost:3000/products/" + (product.id || ""), { //Eğer ürünün idsi geldi ve bu kullanılmak isteniyorsa bu bir güncelleme(Put) işlemidir.Ancak id gelmedi ise sıfırdan yeni bir ürün eklenecektir. method: product.id ? "PUT" : "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(product), // Adresi bellirledikten sonra datayı gönderiyoruz.Datamız json tipindeki veriyi stringe çevirdik. }) .then(handleResponse) .catch(handleError); }

export function saveProduct(product) { //Api operasyonunu çağıran ve daha sonrasında thunk ile actionları çağırıp payloadlarını belirliyoruz. return function (dispatch) { return saveProductApi(product) .then((savedProduct) => { product.id //Product id varsa ? dispatch(uptadeProductSuccess(savedProduct)) // Şu aksyonu çalıştır. : dispatch(createProductSuccess(savedProduct)); // Değilse bu bir eklemedir ve bu aksyonu çalıştır. }) .catch((error) => { throw error; }); }; }

Daha sonrasında ise reducerı yazmamız gerekiyor.O da her zamanki gibi actiontypına göre gelen payloadı bir state'e çeviriyor.

Kısa yollar vs code için:

• ctrl+p -> arama yapıp dosya bulmak için
• ctrl+d -> aynı satırdan aşağa indirmek
• ctrl+k+d -> format yapmak için
• ctrl+k+c -> commentlemek için
• ctrl+k+u -> uncommet
• ctrl+space -> intelicense açmak için
• shift+alt+f -> boşlukları silmek için

//D:\çalışmalarım\React Uygulamalar\northWind\northwind\api