Mein Staatsmanager für React, Preact, Inferno

Ich liebe es, Fahrräder und andere nützliche Dinge neu zu erfinden. Es funktioniert nicht immer gut, aber der Prozess ist interessant. Ich mache Sie auf die State-Management-Bibliothek für React, Preact (Gewicht nur 4,8 KB) aufmerksam. Die Bibliothek befindet sich noch in der Entwicklung, aber Sie können sie bereits ausprobieren.

Beginnen wir mit einem Beispiel für den beliebtesten TODO-Veranstalter aller. Quellcode auf Github . Zuerst erstellen wir die Hauptkomponente 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"));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Weitere Seite. Wir benötigen den Speicher, um die Bibliothek zu initialisieren, und hier geben wir auch alle erforderlichen Dateien mit Aktionen an. In unserem Beispiel sind dies Actions.js und 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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Die Taste "-o" öffnet Chrome unter http: // localhost: 8333 , wo sich der Debugger befindet.

Fazit

In meinem eigenen Namen kann ich mitteilen, dass ich mit dieser Bibliothek bereits mehrere Projekte durchgeführt habe. Es war sehr praktisch, in einem Projekt mit Sockets damit zu arbeiten. Es gibt natürlich Verwendungsmerkmale. Denken Sie beispielsweise daran, dass alle Aktionen von allen Modulen aus "sichtbar" sind. Dies ist kein Problem, wenn Sie eine klare Struktur für die Benennung Ihrer Aktionen haben. In meinen Projekten verwende ich diesen Namen "a_moduleName_actionName".

Das ist alles für jetzt. Wenn Interesse besteht, werde ich versuchen, eine detailliertere Bewertung zu schreiben.