Redux। रेक के रूप में सरल

मैं पहले से ही रिडक्स लाइब्रेरी रिपॉजिटरी का दौरा कर चुका हूं, लेकिन कहीं न कहीं मुझे इसके कार्यान्वयन में देरी करने का विचार आया। मैं समुदाय के साथ अपनी चौंकाने वाली या निराशाजनक खोज को साझा करना चाहूंगा।

टीएल; डीआर: जेएस कोड की 7 पंक्तियों में कोर रिडक्स तर्क फिट बैठता है।

संक्षेप में रिडक्स के बारे में (जीथूब पर हेडर का मुफ्त अनुवाद):

Redux जावास्क्रिप्ट अनुप्रयोगों के लिए एक राज्य प्रबंधन पुस्तकालय है।

यह उन अनुप्रयोगों को लिखने में मदद करता है, जो निश्चित रूप से व्यवहार करते हैं / भविष्यवाणी करते हैं, विभिन्न वातावरणों (क्लाइंट / सर्वर / देशी कोड) में काम करते हैं और आसानी से परीक्षण किए जाते हैं।

मैंने Redux रिपॉजिटरी पर क्लोन किया , संपादक में स्रोत फ़ोल्डर खोला ( डॉक्स , उदाहरण आदि को अनदेखा करते हुए) और कैंची के साथ डिलीट की को पकड़ा :

• सभी टिप्पणियों को कोड से निकाल दिया गया
  प्रत्येक लाइब्रेरी पद्धति को JSDoc का विस्तार से उपयोग करके प्रलेखित किया गया है।
  
• त्रुटि सत्यापन और लॉगिंग को हटा दिया गया
  प्रत्येक विधि में, इनपुट मापदंडों को कंसोल में बहुत अच्छी विस्तृत टिप्पणियों के आउटपुट के साथ कसकर नियंत्रित किया जाता है
  
• हटाए गए bindActionCreators , सब्सक्राइब , रिप्डरड्यूसर और अवलोकनीय तरीके ।
  
  ... क्योंकि वह कर सकता था। खैर, या क्योंकि मैं उनके लिए उदाहरण लिखने में बहुत आलसी था। लेकिन कोने के मामलों के बिना, वे आगे की तुलना में कम दिलचस्प हैं।
  

अब देखते हैं कि क्या बचा है

---

7 पंक्तियों में redux लिखना

Redux की सभी बुनियादी कार्यक्षमता एक छोटी फ़ाइल में फिट होती है, जिसके लिए शायद ही कोई जीथुब भंडार का निर्माण करेगा :)

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 . ?