Redux + Thunk ile bir React uygulaması kurmak için hızlı bir kılavuz.

Redux nedir?

Redux, uygulama durumunu yönetmek için kullanılan bir JavaScript kitaplığıdır. Üç ana bileşene ayrılabilir.

1. Mağaza
2. Aksiyon
3. Redüktör

Bir eylem bir: İki özellikleri olan basit bir JavaScript nesnesidir türü ve yük . Bir eylemin temel amacı, uygulamada meydana gelen bir şeyi açıklamaktır (örneğin, kullanıcı alışveriş sepetine bir öğe eklemek için bir düğmeyi tıklar).

Bir azaltıcı mevcut durumu ve bir eyleme alan bir fonksiyonudur. Eylemin türüne göre durumun nasıl güncelleneceğini belirler ve ardından yeni bir durum döndürür.

Neden Thunk'a ihtiyacımız var?

Eylem actionoluşturucu, daha sonra Redux mağazasına gönderilen bir nesneyi döndüren bir işlevdir . Normalde, bir eylem oluşturucu yalnızca bir nesneyi iade edebilir . Thunk ara yazılımını yükleyerek bunun yerine bir işlev döndüren eylem yaratıcıları yapabiliriz. Bu, uygulamanızın getirme çağrıları yapmasına ve bir sunucu ile etkileşimde bulunmasına olanak tanır.

Aşağıdaki iki aksiyon yaratıcısını karşılaştırın.

// returns an object
export const createTodo = todo => {
  return {
    type: "CREATE_TODO",
    payload: todo
  }
}
// returns a function
export const getTodo = () => {
  return(dispatch) => {
    return fetch(url)
    .then(resp => resp.json())
    .then(todo => dispatch({ type: "GET_TODO", payload: todo }))
  })
}

Başlamadan Önce

Uygulamamızın amacı bir düğme görüntülemektir. Düğmeye tıklandığında rastgele bir köpeğin resmi görüntülenmelidir.

Redux'u Kurmak

Halihazırda kurulu bir React uygulaması yoksa, devam edin ve aşağıdaki komutu terminalinizde çalıştırın.

npx create-react-app redux-app

yarn add redux react-redux redux-thunk

Redüktörü Kurun

reducersÖnce klasöre gidin . Adlı bir dosya oluşturun dogReducer.js.

// ./src/reducers/dogReducer.js
const dog = (state = '', action) => {
  switch(action.type) {
    case 'CHANGE_IMAGE':
      return action.payload
    default:
      return state
    }
}
export default dog;

Uygulamanız büyüdükçe birden fazla redüktör oluşturmanız gerekebilir. Bunu yapmak için bir combineReducers.

Klasör içinde gezinti reducersve adlı bir dosya oluşturun index.js.

// ./src/reducers/index.js
import { combineReducers } from 'redux';
import dog from './dogReducer';
import anotherReducer from './anotherReducer';
export default combineReducers({
  dog,
  anotherReducer
})

actionsSonraki klasöre gidin . İndeks adında bir dosya oluşturun .js.

// ./src/actions/index.js
export const changeImage = () => {
  return(dispatch) => {
    return fetch('https://dog.ceo/api/breeds/image/random')
    .then(resp => resp.json())
    .then(image => dispatch({ type: "CHANGE_IMAGE", payload: image.message }))
  }
}

Gidin ./src/index.js.

Aşağıdakileri içe aktarın.

import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import dog from './reducers/dogReducer';

import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Ardından mağazayı oluşturun.

let store = createStore(colors, composeEnhancers(applyMiddleware(thunk)))

<Provider store={store} >
  <App />
</Provider>

DogContainer ve Dog Bileşenleri Oluşturun

Gidin ./src.

Oluşturun DogContainer.js.

Oluşturun Dog.js.

Sonuç

Çalıştır yarn start.

Bu noktada uygulamanın çalışır durumda olması gerekir.

Özetlemek:

1. Bir kullanıcı Resmi Değiştir düğmesini tıklayacaktır .
2. Click olayı , Redux mağazasına gönderilecek bir eylemi tetikler .
3. Eylem sonunda Thunk ara yazılımımıza ulaşacak. Bu, herhangi bir zaman uyumsuz işlemin gerçekleşeceği zamandır. Bizim durumumuzda, rastgele bir köpek resminin URL'sini döndürecek harici bir API'ye bir getirme isteği gönderilecektir.
4. Eşzamansız çalışmamız tamamlandığında, resim URL'mizi içeren bir yük özniteliğine sahip bir eylem nesnesi Redüktör'e gönderilir.
5. İndirgeyici, önceki durumu ve mevcut eylem nesnesini alacaktır. Değeri resim URL'si olarak ayarlanmış yeni bir durum döndürecektir.
6. Durumdaki değişiklik, yeni köpek resmimizi görüntüleyen bir yeniden oluşturmayı tetikleyecektir.