Clever Geek Handbook

React、Preact、Infernoの州マネージャー

自転車などの便利なアイテムを一新するのが大好きです。常にうまくいくとは限りませんが、プロセスは興味深いものです。React、Preact（重量のみ4.8Kb）の状態管理ライブラリに注目します。ライブラリはまだ開発中ですが、すでに試すことができます。





みんなのお気に入りのTODOオーガナイザーの例から始めましょう。githubのソースコード。 まず、メインコンポーネント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"));

さらに側。ライブラリを初期化するためにストアが必要です。ここでは、必要なすべてのファイルをアクションで指定します。この例では、これらはactions.jsと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

「-o」キーを押すと、http：// localhost：8333でchromeが開きます。ここで、デバッガーが配置されます。





結論

私自身のために、このライブラリを使用してすでにいくつかのプロジェクトを行ったことを共有できます。ソケットを使用するプロジェクトで作業するのは非常に便利でした。もちろん、使用の特徴があります。たとえば、すべてのアクションはすべてのモジュールから「表示」されることに注意してください。アクションに名前を付けるための明確な構造があれば、これは問題にはなりません。私のプロジェクトでは、この名前「a_moduleName_actionName」を使用しています。





それは今のところすべてです。興味があれば-もっと詳細なレビューを書こうと思います。







More articles:


All Articles