استرجاع بسيطة مثل أشعل النار

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

TL ؛ DR: منطق التكرار الأساسي يناسب 7 أسطر من كود JS.

حول الإعادة باختصار (ترجمة مجانية للرأس على github):

Redux هي مكتبة لإدارة الولاية لتطبيقات JavaScript.

يساعد في كتابة التطبيقات التي تتصرف بشكل مستقر / متوقع ، وتعمل في بيئات مختلفة (العميل / الخادم / الكود الأصلي) ويتم اختبارها بسهولة.

قمت باستنساخ مستودع الإعادة ، فتحت المجلد المصدر في المحرر (تجاهل المستندات ، والأمثلة ، إلخ) وأمسك بمفتاح الحذف بالمقص :

• تمت إزالة جميع التعليقات من الكود
  تم توثيق كل طريقة مكتبة باستخدام JSDoc بتفصيل كبير.
  
• إزالة التحقق من صحة الخطأ وتسجيل
  في كل طريقة ، يتم التحكم في معلمات الإدخال بإحكام مع إخراج التعليقات التفصيلية اللطيفة جدًا على وحدة التحكم
  
• إزالة bindActionCreators ، والاشتراك ، واستبدال Reducer وطرق يمكن ملاحظتها .
  
  ... لأنه يمكن. حسنًا ، أو لأنني كنت كسولًا جدًا في كتابة أمثلة لهم. ولكن من دون حالات الزاوية ، فهي أقل إثارة للاهتمام من ما ينتظرنا.
  

الآن دعونا نلقي نظرة على ما تبقى

---

كتابة مسترجع في 7 خطوط

جميع الوظائف الأساسية لردكس تتناسب مع ملف صغير ، والذي بالكاد سينشئ أي شخص مستودع جيثب :)

function createStore(reducer, initialState) {
    let state = initialState
    return {
        dispatch: action => { state = reducer(state, action) },
        getState: () => state,
    }
}

. , , .

redux. 18 HeadHunter «redux» — , , 7 . — .

7 TodoApp. . TodoApp redux.

//  
function todosReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo => {
        if (todo.id === action.id) {
          return { ...todo, completed: !todo.completed }
        }
        return todo
      })
    default:
      return state
  }
}

const initialTodos = []

const store = createStore(todosReducer, initialTodos)

// 
store.dispatch({
  type: 'ADD_TODO',
  id: 1,
  text: '  redux '
})

store.getState() 
// [{ id: 1, text: '  redux ', completed: false }]

store.dispatch({
  type: 'TOGGLE_TODO',
  id: 1
})

store.getState() 
// [{ id: 1, text: '  redux ', completed: true }]

, show must go on.
, .

combineReducers

, , reducer , .

:

//     todosReducer   

function counterReducer(state, action) {
  if (action.type === 'ADD') {
    return state + 1
  } else {
    return state
  }
}

const reducer = combineReducers({
  todoState: todoReducer,
  counterState: counterReducer
})

const initialState = {
  todoState: [],
  counterState: 0,
}

const store = createStore(reducer, initialState)

store , .

TodoApp .

ES6 (7/8/∞):

const reducer = combineReducers({ todos, counter })

todoReducer todos counterReducer counter. . , , redux, , (state.todos) , (function todos(){}).

micro-redux, :

function reducer(state, action) {
  return {
    todoState: todoReducer(state, action),
    counterState: counterReducer(state, action),
  }
}

. 2 «-», (state, action), , ?

, Object.entries

combineReducers (, ) :

function combineReducers(reducersMap) {
  return function combinationReducer(state, action) {
    const nextState = {}
    Object.entries(reducersMap).forEach(([key, reducer]) => {
      nextState[key] = reducer(state[key], action)
    })
    return nextState
  }
}

redux 9 .

, , .

applyMiddleware

middleware redux — - , dispatch -. , , ,… — -.

middleware createStore, , :

const createStoreWithMiddleware = applyMiddleware(someMiddleware)(createStore)
const store = createStoreWithMiddleware(reducer, initialState)

applyMiddleware, 10 , : createStore «dispatch». dispatch, ( ) , — , (newState = reducer(state, action)).
applyMiddleware dispatch, ( ) - .

, , middleware redux — redux-thunk

,

store.dispatch({type: 'SOME_ACTION_TYPE', some_useful_data: 1 })

store.dispatch

function someStrangeAction() {
  return async function(dispatch, getState) {
    if(getState().counterState % 2) {
       dispatch({
         type: 'ADD',
       })
    }
    await new Promise(resolve => setTimeout(resolve, 1000))
    dispatch({
      type: 'TOGGLE_TODO',
      id: 1
    })
  }
}

,

dispatch(someStrangeAction())

:

• store.getState().counterState 2, 1
• , todo id=1 completed true false .

, redux-thunk, redux — , ,

:

const thunk = store => dispatch => action => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState)
  }
  return dispatch(action)
}

,

const thunk = store => dispatch => action

, , , , , (, , )

, createStore

function createStore(reducer, initialState) {
    let state = initialState
    return {
        dispatch: action => { state = reducer(state, action) },
        getState: () => state,
    }
}

(reducer, initialState) { dispatch, getState }.

, applyMiddleware , , .
createStore :

function applyMiddleware(middleware) {
  return function createStoreWithMiddleware(createStore) {
    return (reducer, state) => {
      const store = createStore(reducer, state)

      return {
        dispatch: action => middleware(store)(store.dispatch)(action),
        getState: store.getState,
      }
    }
  }
}

redux . « , ». , 1 — .

P.S.

«micro-redux» store.subscribe 8 . ?