javascript - معنى - what is redux




ريدوكس-إدارة حالة التحميل المسبق (2)

أولا، اسمحوا لي بتصحيح المثال.

بدلا من

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

يمكنك (وينبغي أن) الكتابة

export function initApp () {
  return (dispatch) => {
    dispatch(loadPeople());
    dispatch(loadPlanets());
  };
}

أنت لا تحتاج إلى تمرير dispatch باعتبارها الوسيطة ثكونك-ثونك يعتني بهذا.
بالطبع من الناحية الفنية رمز الخاص بك هو صالح، ولكن أعتقد أن اقتراحي يقرأ أسهل.

  1. ما هي أفضل الممارسات لإدارة حالة التحميل المسبق الشامل للتطبيق في ريدوكس؟

ما تفعله يبدو صحيحا. لا توجد أفضل الممارسات المحددة.

  1. هل هناك حالة تحميل عالمية في المخزن ضروري؟

لا كما يقول ديفيد في جوابه ، كنت أفضل من تخزين الدولة الضرورية فقط.

  1. ما يمكن أن يكون وسيلة قابلة للتحقق من التطبيق تحميل الدولة في مكونات رد فعل متعددة؟ لا يبدو الحق في تضمين الناس والكوكب الدولة للحاويات التي تحتاج فقط إلى معرفة حالة التطبيق العالمي ولا يعالج تقديم الناس أو الكواكب. أيضا سيكون من المؤلم أن إدارة عندما تكون هناك حاجة إلى حالة تحميل العالمية في حاويات متعددة.

إذا كنت قلقا بشأن الازدواجية، قم بإنشاء وظيفة "محدد" ووضعه بجانب المخفضات:

// Reducer is the default export
export default combineReducers({
  planets,
  people
});

// Selectors are named exports
export function isAllLoaded(state) {
  return state.people.loaded && state.planets.loaded;
}

الآن يمكنك استيراد محددات من المكونات الخاصة بك واستخدامها في وظيفة mapStateToProps داخل أي مكون:

import { isAllLoaded } from '../reducers';

function mapStateToProps(state) {
  return {
    loaded: isAllLoaded(state),
    people: state.people.items,
    planets: state.planet.items
  };
}
  1. هل دان عن طريق استدعاء المخفضات الأخرى يعني استدعاء المخفضات المتداخلة؟

نعم، يعني تكوين المخفض عادة استدعاء المخفضات المتداخلة.
يرجى الرجوع إلى بلدي مجانا إيغهيد أشرطة الفيديو التعليمي حول هذا الموضوع:

أنا بناء تطبيق، حيث أحتاج إلى التحميل المسبق people planet البيانات ( فمن المرجح أنه في المستقبل يمكن إضافة المزيد من متطلبات التحميل المسبق ) على إطلاق التطبيق. أريد أن يكون لها قيمة في المخزن الذي يمثل الحالة العالمية من التطبيق كما تم loaded: <boolean> . ستكون القيمة صحيحة فقط عند تحميل متطلبات التحميل المسبق. تحميل people.loaded: true planet.loaded: true أند planet.loaded: true . سيبدو المتجر شيئا من هذا القبيل:

Store
├── loaded: <Boolean>
├── people:
   ├── loaded: <Boolean>
   └── items: []
├── planets:
   ├── loaded: <Boolean>
   └── items: []

يقوم منشئو العمل المنفصلون بإجراء طلبات غير متزامنة وإجراءات إرسال يتم التعامل معها بواسطة أجهزة Planets المخفضات Planets . كما هو مبين أدناه (يستخدم ريدوكس-ثونك ):

actions/index.js

import * as types from '../constants/action-types';
import {getPeople, getPlanets} from '../util/swapi';

export function loadPeople () {
  return (dispatch) => {
    return getPeople()
      .then((people) => dispatch(addPeople(people)));
  };
}

export function loadPlanets () {
  return (dispatch) => {
    return getPlanets()
      .then((planets) => dispatch(addPeople(planets)));
  };
}

export function addPeople (people) {
  return {type: types.ADD_PEOPLE, people};
}

export function addPlanets (planets) {
  return {type: types.ADD_PLANETS, planets};
}

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

../util/swapi يعالج جلب الناس وكوكب البيانات إما من لوكالستوراج أو تقديم طلب.

initApp() منشئ الإجراء initApp() الإجراءات الآخرين داخل site.js قبل العرض إلى دوم مباشرة كما هو موضح أدناه:

site.js

import React from 'react';
import {render} from 'react-dom';
import Root from './containers/root';
import configureStore from './store/configure-store';
import {initApp} from './actions';

const store = configureStore();

// preload data
store.dispatch(initApp());

render(
  <Root store={store} />,
  document.querySelector('#root')
);

1. ما هي أفضل الممارسات لإدارة حالة التحميل المسبق العالمي للتطبيق في ريدوكس؟

2. هل وجود حالة loaded العالمية في مخزن اللازمة؟

3. ما يمكن أن يكون وسيلة قابلة للتحقق من التطبيق loaded الدولة في مكونات رد فعل متعددة؟ لا يبدو الحق في تضمين People Planet الدولة للحاويات التي تحتاج فقط إلى معرفة حالة التطبيق العالمي ولا يعالج تقديم People أو Planets . أيضا سيكون من المؤلم أن إدارة عندما تكون هناك حاجة إلى حالة loaded العالمية في حاويات متعددة.

نقلا عن جزء من الجواب دان من ريدوكس - مخازن متعددة، لماذا لا؟ سؤال.

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

4. هل دان عن طريق استدعاء المخفضات الأخرى يعني استدعاء المخفضات المتداخلة؟


العلم المحمل في حالة متجرك يجعل من المنطقي تماما.

ومع ذلك كنت قد حصلت على الكثير جدا منهم. كنت قد حصلت على state.people.loaded ، state.planets.loaded وكذلك state.loaded . ويستمد هذا الأخير من الأولين. متجرك حقا لا ينبغي أن تحتوي على حالة مشتقة. إما أن يكون أول اثنين فقط أو مجرد هذا الأخير.

توصيتي ستكون للحفاظ على الأولين، أي state.people.loaded و state.planets.loaded . ثم المكون الخاص بك يمكن أن تستمد حالة تحميل النهائي. على سبيل المثال

function mapStateToProps(state) {
    return {
        loaded: state.people.loaded && state.planets.loaded,
        people: state.people.items,
        planets: state.planet.items
    };
}




redux