Redux



redux

Redux

Redux هو حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript.
(إذا كنت تبحث عن إطار WordPress ، فراجع Redux Framework .)

يساعدك على كتابة التطبيقات التي تتصرف باستمرار ، وتشغيل في بيئات مختلفة (العميل والخادم ، والأصلي) ، وسهلة لاختبار. علاوة على ذلك ، فإنه يوفر تجربة رائعة للمطورين ، مثل تحرير التعليمة البرمجية المباشرة مع مصحح أخطاء وقت السفر .

يمكنك استخدام Redux مع React ، أو مع أي مكتبة عرض أخرى.
أنها صغيرة (2 كيلو بايت ، بما في ذلك التبعيات).

تعلم Redux من منشئه:
الجزء الأول: بدء الاستخدام مع Redux (30 مقطع فيديو مجانيًا)
الجزء 2: بناء تطبيقات رد فعل مع Redi اصطلاحي (27 فيديو مجانا)

الشهادات - التوصيات

"أحب ما تفعله مع Redux"
جينغ تشن ، مبدع الجريان

"سألت عن التعليقات على Redux في مجموعة المناقشة الداخلية JS الداخلية ، وتم الإشادة بها عالمياً. عمل رائع حقا ".
بيل فيشر ، مؤلف كتاب Flux documentation

"من الرائع أن تقوم باختراع تدفق أفضل من خلال عدم القيام بالتدفقات على الإطلاق".
أندريه ستالتز ، مبدع الدورة

قبل المضي قدما

اقرأ أيضًا:
قد لا تحتاج إلى Redux

تجربة المطور

كتبت Redux أثناء العمل على حديث React Europe بعنوان "إعادة التحميل السريع مع السفر عبر الزمن" . كان هدفي هو إنشاء مكتبة إدارة حكومية مع الحد الأدنى من واجهة برمجة التطبيقات ولكن سلوكًا يمكن التنبؤ به تمامًا ، لذلك من الممكن تنفيذ التسجيل وإعادة التحميل السريع والسفر عبر الزمن والتطبيقات العامة والتسجيل وإعادة التشغيل بدون أي اشتراك من المطور.

تأثيرات

يقوم Redux بتطوير أفكار Flux ، ولكنه يتجنب تعقيدها من خلال تلقي إشارات من Elm .
سواء كنت قد استخدمتها أم لا ، فإن Redux يستغرق بضع دقائق فقط للبدء.

التركيب

لتثبيت الإصدار الثابت:

npm install --save redux

هذا يفترض أنك تستخدم npm كمدير الحزم الخاص بك.

إذا لم تكن كذلك ، فيمكنك الوصول إلى هذه الملفات على unpkg أو تنزيلها أو توجيه مدير الحزم إليها.

معظم الناس عادة ما يستهلكون Redux كمجموعة من وحدات CommonJS . هذه الوحدات النمطية هي ما تحصل عليه عند استيراد redux في بيئة Webpack أو Browserify أو عقدة. إذا كنت ترغب في العيش على الحافة واستخدام التراكمي ، فإننا ندعم ذلك أيضًا.

إذا كنت لا تستخدم أداة موائمة وحدة نمطية ، فلا بأس أيضًا. تتضمن الحزمة npm redux تصميمات UMD للإنتاج والتطوير المسبق في مجلد dist . يمكن استخدامها مباشرة بدون أداة تجميع ، وبالتالي فهي متوافقة مع العديد من لوادر ووحدات تحميل وحدات برامج جافا سكريبت الشعبية. على سبيل المثال ، يمكنك إسقاط بنية UMD كعلامة < script > على الصفحة ، أو إخبار Bower بتثبيتها . إن window.Redux UMD تجعل Redux متاحًا window.Redux global.

تتم كتابة شفرة المصدر Redux في ES2015 ، ولكننا سنقوم بتحويل كل من CommonJS و UMD إلى ES5 بحيث تعمل في أي متصفح حديث . لست بحاجة إلى استخدام Babel أو أداة دمج الوحدات للبدء مع Redux .

الحزم التكميلية

على الأرجح ، ستحتاج أيضًا إلى روابط React وأدوات أدوات التطوير .

npm install --save react-redux
npm install --save-dev redux-devtools

لاحظ أنه على عكس Redux نفسه ، فإن العديد من الحزم في نظام Redux لا توفر بنية UMD ، لذا فإننا نوصي باستخدام برامج Webpack الوحدات النمطية CommonJS مثل Webpack و Browserify للحصول على تجربة التطوير الأكثر راحة.

جوهر

يتم تخزين حالة التطبيق بالكامل في شجرة كائن داخل متجر واحد.
والطريقة الوحيدة لتغيير شجرة الحالة هي إصدار إجراء ، وهو كائن يصف ما حدث.
لتحديد كيفية قيام الإجراءات بتحويل شجرة الحالة ، تقوم بكتابة مخفضات نقية.

هذا هو!

import { createStore } from 'redux'

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 * It describes how an action transforms the state into the next state.
 *
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * or even an Immutable.js data structure. The only important part is that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.

store.subscribe(() =>
  console.log(store.getState())
)

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

فبدلاً من تحوّل الحالة مباشرة ، تقوم بتحديد الطفرات التي تريد أن تحدث مع كائنات بسيطة تسمى الإجراءات . ثم تكتب وظيفة خاصة تسمى المخفض لتقرر كيف يقوم كل إجراء بتحويل حالة التطبيق بالكامل.

إذا كنت قادمًا من Flux ، فهناك فرق واحد مهم يجب أن تفهمه. لا يحتوي Redux على مرسل أو يدعم العديد من المتاجر. بدلا من ذلك ، هناك فقط مخزن واحد مع وظيفة واحدة للحد من الجذر. مع نمو تطبيقك ، بدلاً من إضافة متاجر ، يمكنك تقسيم مخفض الجذر إلى مخفضات أصغر تعمل بشكل مستقل على الأجزاء المختلفة من شجرة الحالة. هذا هو بالضبط مثل وجود مكون أساسي واحد فقط في تطبيق React ، ولكنه يتكون من العديد من المكونات الصغيرة.

قد تبدو هذه البنية وكأنها مبالغة بالنسبة إلى التطبيق المضاد ، لكن جمال هذا النمط هو مدى توزّع التطبيقات الكبيرة والمعقدة. كما يتيح أيضًا أدوات مطوّري البرامج القوية جدًا ، نظرًا لأنه من الممكن تتبع كل تغيير في الإجراء الذي تسبب في حدوثه. يمكنك تسجيل جلسات المستخدم وإعادة إنتاجها فقط من خلال إعادة كل إجراء.

تعلم Redux من خالقها

بدء الاستخدام مع Redux هو دورة فيديو تتكون من 30 مقطع فيديو رواه دان أبراموف ، مؤلف كتاب Redux. تم تصميمه ليكمّل جزء "الأساسيات" من المستندات مع تقديم إحصاءات إضافية حول قابلية الاختبار ، والاختبار ، وأفضل ممارسات Redux ، واستخدام Redux مع React. هذه الدورة مجانية وستظل دائما كذلك.

"دورة رائعة على egghead.io من قبلdan_abramov - بدلاً من مجرد إظهار كيفية استخدام #redux ، فإنه يوضح أيضًا كيف ولماذا تم بناء redux!"
ساندرينو دي ماتيا

"الحرث من خلالdan_abramov" الشروع في العمل مع Redux "- من المذهل كيف تحصل على مفاهيم أبسط مع الفيديو".
كريس دهاناراج

"سلسلة الفيديو هذه على Redux منdan_abramov علىeggheadio رائعة!"
إيدي زانسكي

"تعال من أجل الضجة الاسم. البقاء لأساسيات صلبة صلبة. (شكرا ، وعمل عظيمdan_abramov وeggheadio!) "
دان

"هذه السلسلة من مقاطع الفيديو على Redux من قبلdan_abramov تكرر تفكيري مرارًا - غونّا تفعل بعض إعادة البناء الضار"
لورانس روبرتس

فما تنتظرون؟

شاهد 30 فيديو مجاني!

إذا استمتعت بدوري ، فكر في دعم برنامج Egghead بشراء اشتراك . يمكن للمشتركين الدخول إلى شفرة المصدر للمثال في كل مقطع من مقاطع الفيديو الخاصة بي ، بالإضافة إلى العديد من الدروس المتقدمة حول موضوعات أخرى ، بما في ذلك جافا سكريبت في العمق ، و React ، و Angular ، والمزيد. العديد من مدربي Egghead هم أيضًا من مؤلفي مكتبة المصدر المفتوح ، لذا يعتبر شراء الاشتراك طريقة لطيفة لشكرهم على العمل الذي قاموا به.

كابل بيانات

لتصدير ملفات PDF و ePub و MOBI للقراءة بلا اتصال والإرشادات حول كيفية إنشائها ، الرجاء الاطلاع على: paulkogel/redux-offline-docs .

بالنسبة إلى المستندات غير المتصلة ، يرجى الاطلاع على: devdocs

أمثلة

تحتوي جميع الأمثلة تقريبًا على sandbox CodeSandbox مطابق. هذا هو نسخة تفاعلية من التعليمات البرمجية التي يمكنك اللعب بها عبر الإنترنت.

إذا كنت جديدًا في النظام الأساسي لـ NPM ولديك مشكلات في الحصول على مشروع وتشغيله ، أو لم تكن متأكدًا من مكان لصق البيانات أعلاه ، simplest-redux-example يستخدم Redux مع React و Browserify.

نقاش

انضم إلى قناة #redux لمجتمع Reactiflux Discord .

شكر

شكر خاص لجامي باتون redux اسم الحزمة NPM.

يمكنك العثور على الشعار الرسمي على GitHub .

غير المفتاح

هذا المشروع يلتزم الإصدار الدلالي .
يتم توثيق كل إصدار ، بالإضافة إلى تعليمات الترحيل ، في صفحة Releases Github.

رعاة

تم تمويل العمل على Redux من قبل المجتمع .
تعرّف على بعض الشركات البارزة التي جعلت الأمر ممكنًا:

انظر القائمة الكاملة لرعاة Redux. بالإضافة إلى قائمة الأشخاص والشركات التي تستخدم Redux دائمًا.

رخصة

MIT