Normalde Stack'e kodla ilgili şeyler gönderirim, ancak bu daha çok topluluğun genel düşüncelerinin ne olduğu ile ilgili bir soru.

Verileri / durumu yönetmek için React ile Redux kullanımını savunan birçok insan var gibi görünüyor, ancak her ikisini de okurken ve öğrenirken pek de doğru görünmeyen bir şeyle karşılaştım.

Redux

Bu sayfanın alt kısmında: http://redux.js.org/docs/basics/UsageWithReact.html (Mağazayı Geçirme), React 'Context'in "Magic" ini kullanmanızı önerir.

Bir seçenek, onu her konteyner bileşenine bir destek olarak geçirmek olacaktır. Bununla birlikte, sırf bileşen ağacının derinliklerinde bir konteynır oluşturdukları için sunum bileşenleri aracılığıyla bile kablo depolamak zorunda olduğunuz için sıkıcı oluyor.

Önerdiğimiz seçenek, mağazayı sihirli bir şekilde tüm konteyner bileşenleri için kullanılabilir hale getirmek için adı verilen özel bir React Redux bileşeni kullanmaktır ...

Tepki

React Context sayfasının ( https://facebook.github.io/react/docs/context.html ) üst kısmında bir uyarı vardır:

Bağlam, gelişmiş ve deneysel bir özelliktir. API'nin gelecekteki sürümlerde değişmesi muhtemeldir.

Sonra en altta:

Tıpkı açık kod yazarken genel değişkenlerden kaçınmanın en iyi yolu olduğu gibi, çoğu durumda bağlam kullanmaktan kaçınmalısınız ...

Model verilerinizi bileşenlerden geçirmek için bağlam kullanmayın. Verilerinizi ağacın içinden akıtmak, anlaşılması çok daha kolaydır ...

Yani...

Redux store, her bir bileşene 'props' aracılığıyla geçmek yerine React 'Context' özelliğini kullanmanızı önerir . React tam tersini önerirken.

Ayrıca, görünen o ki Dan Abramov (Redux'un yaratıcısı) artık Facebook (React'in yaratıcısı) için çalışıyor, sadece kafamı karıştırmak için.

• Tüm bunları doğru okuyor muyum ..?
• Bu konudaki genel mevcut fikir birliği nedir ..?

Bağlam gelişmiş bir özelliktir ve değişebilir. Bazı durumlarda, rahatlığı dezavantajlarından daha ağır basar, bu nedenle React Redux ve React Router gibi bazı kütüphaneler deneysel doğasına rağmen ona güvenmeyi seçer.

Burada önemli olan kitaplıklar kelimesi . Bağlam, davranışını değiştirirse, kütüphane yazarları olarak biz ayarlamamız gerekir . Ancak, kitaplık sizden doğrudan bağlam API'sini kullanmanızı istemediği sürece, kullanıcı olarak bu API'deki değişiklikler konusunda endişelenmenize gerek kalmaz.

React Redux, içeriği dahili olarak kullanır, ancak bu gerçeği genel API'de ortaya çıkarmaz. Dolayısıyla, React Redux aracılığıyla bağlamı kullanırken doğrudan kullanmaktan çok daha güvenli hissetmelisiniz çünkü eğer değişirse, kodu güncellemenin yükü size değil React Redux'e ait olacaktır.

Nihayetinde React Redux, her zaman bir destek olarak mağazadan geçişi desteklemeye devam eder, bu nedenle bağlamdan tamamen kaçınmak istiyorsanız, bu seçeneğe sahipsiniz. Ancak bunun pratik olmadığını söyleyebilirim.

TLDR: Ne yaptığınızı gerçekten bilmiyorsanız doğrudan bağlam kullanmaktan kaçının. İçeride bağlama bağlı olan bir kitaplığı kullanmak nispeten güvenlidir.

Başkalarını bilmiyorum, ancak bileşenlerimi sarmak için react-redux'un bağlantı dekoratörünü kullanmayı tercih ederim, böylece bileşenime yalnızca ihtiyaç duyduğum mağazadaki aksesuarlar aktarılır. Bu meşrulaştırdığı bir anlamda bağlamda kullanılması nedeniyle ben bunu tüketen değilim (kural olarak ve biliyorum, bunu tüketmek olmaz I görevli olduğum herhangi bir kod).

Bileşenlerimi test ettiğimde, sarılmamış bileşeni test ederim. React-redux sadece o bileşende ihtiyacım olan özellikleri geçtiğinden, şimdi testleri yazarken tam olarak hangi desteğe ihtiyacım olduğunu biliyorum.

Sanırım mesele şu ki, kodumda kelime bağlamını hiç görmüyorum, onu tüketmiyorum, bu yüzden belirli bir dereceye kadar beni etkilemiyor! Bu, Facebook'un "deneysel" uyarısı hakkında hiçbir şey söylemiyor .. İçerik ortadan kalktıysa, Redux güncellenene kadar herkes gibi mahvolmuş olurdum.

React bağlamına redux eklemeyi gerçekten kolaylaştıran bir npm modülü var

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}