الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Redux Tutorial by TypeScript

جربت البرنامج التعليمي لـ Redux مع TypeScript. (ن تغيير)
سأكتب أفضل ممارساتي في الوقت الحالي.

يثبت 

$ create-react-app < App名> --scripts-version=react-scripts-ts # TypeScriptで作成.
$ yarn add redux react-redux # reduxを追加
$ yarn add -D @types/react-redux tslint-config-airbnb # reduxのtypeと、air-bnbのtslintを追加.

لينتر

للسيطرة على أنفسنا ، قدمنا tslint-config-airbnb .

عالمي 

 "globals" : {
    "window" : true ,
    "location" : true ,
    "document" : true
  },

من الجيد كتابة شيء من هذا القبيل.

لمزيد من التفاصيل ، راجع tslint.json .

العمل ، خالق العمل

يتم تنفيذ الإجراءات في إشارة إلى الإجراءات القياسية لتدفق وتخزين القيم داخل payload .
توسيع الواجهة عمل Redux. 

 interface AddTodoAction extends Action {
  type: ActionTypes . ADD_TODO ;
  payload: {
    id: number ;
    text: string ;
  } ;
}

بالإضافة إلى ذلك ، من خلال تحديد ActionType كتعداد ، فإنه يوفر تطبيقًا أكثر أمانًا. 

 export enum ActionTypes {
  ADD_TODO = 'ADD_TODO' ,
  SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' ,
  TOGGLE_TODO = 'TOGGLE_TODO' ,
}

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

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ;

ولاية

الدولة هي واجهة محددة في states/ . تتولى كل دولة أفكار Redux ويتم تحديدها على أنها قراءة.
من خلال تحديد حالة الكائن ، يمكنك استخدام أنواع في أماكن مختلفة ، مما يجعلها مريحة. 

 export interface TodoState {
  readonly id : number ;
  readonly text : string ;
  readonly completed : boolean ;
}

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

export interface State {
  readonly visibilityFilter : VisibilityFilters ;
  readonly todos : TodoState [ ] ;
}

المخفض ، المتجر

يجب عليك فقط تنفيذها بصراحة.

المكون التقديمي

نظرًا لأنه مكون تقديمي ، يتم تنفيذه بشكل أساسي ليكون SFC.
تمت كتابة props الوسيطة في البرنامج التعليمي كـ ({ active, children, onClick }) ، ولكن باستخدام هذا كمرجع ، يتم توسيع الدعائم ضمن الوظيفة.
ما تفعله يبقى كما هو ، لذلك يمكنك أن تقرر بناءً على تفضيلاتك. شخصيا ، إذا كتبته كوسيطة ، يصبح قسم التعريف المتغير زائدًا جدًا ، لذلك تفضل داخل الوظيفة.
تعرّف الدعائم لكل مكون الواجهة على أنها ownprops. 

 export interface OwnProps {
  active: boolean ;
  onClick: ( ) => any ;
}

const Link : React . SFC < OwnProps > = (props) = > {
  const { children , active , onClick } = props;

  return (
    < button
      onClick = { onClick }
      disabled = { active }
      style = { {
        marginLeft : '4px' ,
      } }
    >
      { children }
    </ button >
  );
} ;

export default Link ;

أعتقد أن SFC على ما يرام للتطبيق مباشرة تحت المزود. 

 const App : React . SFC = ( ) => (
  < div >
    < AddTodo />
    < VisibleTodoList />
    < Footer />
  </ div >
) ;

export default App ;

مكون الحاوية

يبدو أنه مبالغة ، لكننا نحدد واجهة DispatchToProps على أنها قيم الإرجاع لـ mapStateToProps ، كواجهة StateToProp و mapDispatchToProps . 

 interface StateToProps {
  todos: TodoState [ ] ;
}

interface DispatchToProps {
  toggleTodo: ( id : number ) => any ;
}

عند connect()(AddTodo) AddTodo في البرنامج التعليمي () (addTodo) ، يصبح نوع AddTodo غامضًا ، لذلك من الجيد تصدير الشخص الذي connect()(AddTodo) كما هو.

تاريخ تحديث

2018.4.13

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل