Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

React , Redux, Redux-Thunk, Hooks project example

NotificationsYou must be signed in to change notification settings

keremdanismaz/Redux-Shops

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

        About

        React , Redux, Redux-Thunk, Hooks project example

        Topics

        Resources

        Stars

        Watchers

        Forks

        Releases

        No releases published

        Packages

        No packages published

        [8]ページ先頭

        ©2009-2025 Movatter.jp