Manajer negara saya untuk React, Preact, Inferno

Saya suka menemukan kembali sepeda dan barang berguna lainnya. Itu tidak selalu berhasil dengan baik, tetapi prosesnya menarik. Saya membawa perhatian Anda pada perpustakaan manajemen negara untuk Bereaksi, Preact (berat hanya 4.8Kb). Pustaka ini masih dalam pengembangan, tetapi Anda sudah dapat mencobanya.

Mari kita mulai dengan contoh penyelenggara TODO favorit semua orang. Kode sumber di github . Pertama, mari buat komponen utama main.js.

// main.js
import React, { createElement, Component, createContext } from 'react';
import ReactDOM from 'react-dom';
import {Connect, Provider} from './store'
import Input from './InputComp'
import TodoList from './TodoList'
import LoadingComp from './LoadingComp'

const Main = () => (
  <Provider>
    <h1>Todo:</h1>
    <LoadingComp>
      <TodoList/>
    </LoadingComp>
    <hr/>
    <Input/>
  </Provider>
)

ReactDOM.render(<Main />, document.getElementById("app"));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Sisi lebih jauh. Kami membutuhkan penyimpanan untuk menginisialisasi pustaka, dan di sini kami juga menentukan semua file yang diperlukan dengan tindakan. Dalam contoh kami, ini adalah actions.js dan actionsSetup.js

// store.js

import React, { createElement, Component, createContext } from 'react';
import createStoreFactory from 'redoor';

//     actions.js  actionsSetup.js
import * as actions from './actions'
import * as actionsSetup from './actionsSetup'

//       React
const createStore = createStoreFactory({
  Component, 
  createContext, 
  createElement
});

//         
//    
const { Provider, Connect } = createStore([
  actions,
  actionsSetup
]);

export { Provider, Connect };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

// actions.js

//         
// redoor     
// initState       ,
//   ,     
export const initState = {
    todos:[],
    value:'',
}

//     
//  state -   
//  args -      
//     
export const a_enter = ({state,args}) => {
  let {value,todos} = state;
  todos.push({
    id:(Math.random()+"").substr(2),
    value:value,
    done:false
  });
  return {
    value:'',
    todos
  }
}

//    
export const a_done = ({state,args}) => {
  let {todos} = state;
  let id = args.id;
  todos = todos.map(it=>(it.id === id ? (it.done = !it.done, it) : it))
  return {
    todos
  }
}

//    
export const a_delete = ({state,args}) => {
  let {todos} = state;
  let id = args.id;
  todos = todos.filter(it=>it.id !== id)
  return {
    todos
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

// InputComp.js
import React from 'react';
import {Connect} from './store'

// redoor     cxRun   
//  
const Input = ({cxRun, value})=><label className="input">
  Todo:
  
  //        
  <input onChange={e=>cxRun({value:e.target.value})} 
					value={value} 
					type="text" 
  />
  
  //     a_enter   actions.js
  <button onClick={e=>cxRun('a_enter')} disabled={!value.length}>
		ok
	</button>
</label>

//   redoor     
export default Connect(Input);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

cxRun . , actions.js.

.

// TodoList.js
import React from 'react';
import {Connect} from './store'

const Item = ({cxRun, it, v})=><div className="item">
  //   a_done,      
  //         args
  <div className="item_txt" onClick={e=>cxRun('a_done',it)}>
    {v+1}) {it.done ? <s>{it.value}</s> : <b>{it.value}</b>}
  </div>
  <div className="item_del" onClick={e=>cxRun('a_delete',it)}>
    &times;
  </div>
</div>

const TodoList = ({cxRun, todos})=><div className="todos">
  {
    todos.map((it,v)=><Item key={v} cxRun={cxRun} it={it} v={v}/>)
  }
</div>

export default Connect(TodoList);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. value todos. initState actions.js. initState , . , .

-- "_" "action". cxRun. state args.

state --

args -- cxRun. cxRun('a_delete', it), , args.

, .

? setState actions.js bindStateMethods.

//actions.js
let __setState;
let __getState;

//     
export const bindStateMethods = (getState, setState) => {
  __getState = getState;
  __setState = setState;
};

export const a_setup = async ({state,args}) => {
  __setState({loading:true});
  let data = await loading();
  __setState({
    loading:false,
    todos:data
  })
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"a_load", , . , __getState .

Debugger

redoor-devtool. redoor localhost:8333. , . .

redoor-devtool:

yarn add redoor-devtool
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

npx redoor-devtool -o
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

tombol "-o" akan membuka chrome di http: // localhost: 8333 , tempat debugger berada.

Kesimpulan

Atas nama saya sendiri, saya dapat membagikan bahwa saya telah melakukan beberapa proyek menggunakan pustaka ini. Cukup nyaman untuk bekerja dengannya dalam proyek dengan soket. Tentu saja ada fitur penggunaan. Misalnya, ingatlah bahwa semua tindakan "terlihat" dari semua modul. Ini tidak akan menjadi masalah jika Anda memiliki struktur yang jelas untuk menamai tindakan Anda. Dalam proyek saya, saya menggunakan penamaan ini "a_moduleName_actionName".

Itu saja untuk saat ini. Jika ada minat - saya akan mencoba menulis review yang lebih rinci.