Implementasi arsitektur Redux di MobX. Bagian 1: "Lokasi Masalah Redux"

Bagian artikel ini akan membahas tentang memahami bahan-bahan Redux. Apakah mereka begitu penting, apa analogi mereka. Alternatif yang lebih nyaman untuk hook useReducer juga akan diusulkan.

Sebenarnya, saya tidak akan mereproduksi Redux. Sebagai gantinya, bagian selanjutnya akan menjelaskan bagaimana merancang arsitektur yang lebih baik menggunakan MobX. Bagian selanjutnya terutama untuk mereka yang proyeknya di MobX ternyata membingungkan, dengan perubahan yang tidak terkontrol.

Di bagian artikel ini, saya ingin menunjukkan bahwa:

• pereduksi adalah analog dari fungsi murni biasa untuk mendapatkan keadaan baru.

  
  
  
  
  

• selektor analog dengan fungsi memo biasa yang mengembalikan data.

  
  
  
  
  

• dispatch + action + action creator dianalogikan dengan panggilan fungsi biasa, dan pembagian menjadi dispatch, action, pembuat tindakan sering tidak diperlukan dan digunakan tidak pada tempatnya.

  
  
  
  
  

Artikel ini tidak akan membahas Redux Toolkit dan pustaka lain untuk mengurangi boilerplate. Seperti cara Redux pada awalnya digunakan. Perhatikan bahwa struktur serupa dari kode toko, tempat pengembang pustaka Redux datang, ada sebelum kemunculan Redux Toolkit dalam bentuk yang lebih ramah pengguna di pengelola negara lain, seperti MobX, Vuex (terkadang saya akan menyebutkannya) , karena ini mirip dengan MobX, dan saya sedikit mengenalnya).

Isi bagian pertama

• Satu penyimpanan (penyimpanan) vs banyak penyimpanan

  
  
  
  
  

• Peredam vs fungsi mutasi keadaan murni. Pelanggaran SOLID

  
  
  
  
  

• Selector vs fungsi memoized yang mengembalikan data

  
  
  
  
  

• Logika bisnis di toko MobX vs logika bisnis di middleware

  
  
  
  
  

• Pembuat tindakan, tindakan, pengiriman vs panggilan fungsi langsung

  
  
  
  
  

• Suplemen - apakah Anda perlu useReducer?

  
  
  
  
  

Satu penyimpanan (penyimpanan) vs banyak penyimpanan

Pendekatan satu sisi memiliki kelebihan dan kekurangan. Tetapi proyek Vuex dan MobX bekerja dengan baik dengan banyak toko. Terlebih lagi, keberadaan toko dalam proyek ini bersifat opsional. Namun memisahkan data dan logika untuk bekerja dengannya dari program lainnya, serta memisahkan data dari logika, memberikan peluang dan kenyamanan tambahan selama pengembangan.

" " , . , ( , localStorage/sessionStorage, ) , . Redux , , .

Reducer vs . SOLID

- , , Redux, . , , , () - .

- ugly switch O(n), actions . O(n) , 60 . – . swith - [actionNameKey][function] .

- , , , , .

3 SOLID GRASP

, . , / / . . . " SOLID" " ". : " , SOLID, , , ". . - , /. , , , .

" ". , ,  . .

single-responsibility principle (SRP)

,   . . , . "" -. - , .

, - . . actions. actions. , . , combineReducers.

/

/ , :

• : , .

  
  
  
  
  

• : , , .

  
  
  
  
  

, .

action , . . ( JS ), . , action-.

, . , , Redux - actions , , , . , actions .

LSP - , , , .

https://medium.com/webbdev/solid-4ffc018077da - , : " , , ."

, . , LSP, . , . " ..." , .

. , , , switch, , action -.

.

(High Cohesion) GRASP

( /) - , . ", ." , , .

, switch, . , . . action.type. , case . / /. - , .

SRP SOLID. . , actions, . , action, .

. . , .

. , – . , - action, . - . - , , . :

case 'todos/todoAdded': {
  return {
    ...state,
    todos: [
      ...state.todos,
      action.paylod.newTodo
    ]
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

function todoAdded(state, newTodo) {
  return {
    ...state,
    todos: [
      ...state.todos,
      newTodo
    ]
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- , . type action, Redux, . - . , , / : todoStore['todoAdded'].

vs ,

Redux - . , - . .

MobX (computed values). , , JS . . , Vuex - .

Redux, , middleware. . MobX .

- MobX vs - middleware's

Redux - , , .

Vuex MobX , action API -. Vuex - . , . -, ( ). MVC .   MVC wikipedia - MVC, . , Vuex MobX - MVVM, MVC.

, , . , . , , AngularJS 1.x. , .

- . 2 (, api ), . – ,   . , .

, - , , , . () .

Action creators, actions, dispatch VS

  Redux - .   .

, , - . Redux pub/sub (-).

Pub/sub ( ) , .

, , :

• . , ( ) .

  
  
  
  
  

• , - , . , . - React . , .. react-.

  
  
  
  
  

Redux action-? :

1. , middleware;

   
   
   
   
   

2. middleware, ;

   
   
   
   
   

3. , , .

   
   
   
   
   

? . , - , . actions - . 3- actions . 3 actions ( ).

1. middleware- ( ). , ?

Action, middleware, . .

. dispatch middleware-? -, . , .. . , middleware- middleware .

-, .

2. Middleware . . action ? . , .

3. actions . actions action , . .

- useReducer?

, - , .

useReducer , . . actions, .. , . useReducer - .

Fungsionalitas yang mirip dengan useReducer dapat dilakukan secara manual melalui useState, tetapi ini lama dan tidak nyaman. Tetapi Anda tidak dapat melakukannya setiap waktu, tetapi keluarkan secara terpisah, yang saya lakukan. Saya menulis hook useStateWithUpdaters untuk menulis kode yang lebih mudah dibaca dan digunakan. Di bawah ini adalah contoh penggunaannya:

const updaters = {
  subtract: (prevState, value) => (
    { ...prevState, count: prevState.count - value }
  ),
  add: (prevState, value) => (
    { ...prevState, count: prevState.count + value }
  ),
};

const MyComponent = () => {
  const [{ count }, {add, subtract}] = 
        useStateWithUpdaters({ count: 0 }, updaters);
  return (
    <div>
      Count: {count}
      <button onClick={() => subtract(1)}>-</button>
      <button onClick={() => add(1)}>+</button>
    </div>
  );
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Anda dapat menemukan penerapannya dalam masalah .

Ada versi TypeScript .

Anda juga dapat meningkatkannya sedikit - gabungkan status baru dengan yang sebelumnya dalam implementasi hook itu sendiri, sehingga Anda tidak perlu terus-menerus menulis "... prevState".