README

Nettpack staging 是一个用于将 node 组件创建为 Nette 项目的软件包。

所需

• @nettpack/core

如何使用

• 首先，将 ./src/Config/stageJs.neon.dist 中的内容复制并粘贴到 Nette 项目的 config.neon 中

• 现在，将 trait NettPack\Stage\Application\NettPackTrait 使用到您的基展示文件中。

   use NettpackTrait;

• 在 layout.latte 中，在 head 标签中使用此内容

   {control nettpackLoader}

• 在 layout.latte 中，在 body 标签的底部行中使用此内容

   {control nettpackControl}

如何使用 Application js 类

• 现在您必须学习 @nettpack/core 中的 "example module (每个模块是 webpack.config.js)" 并在 webpack.config.js 的 entry : {app: []} 中查找入口点 application.js，如下所示

   if (module.hot) {
   	module.hot.accept();
   }
   import {App} from "Stage";
   
   function importAll (r) {
   	r.keys().forEach(r);
   }
   importAll(require.context('../', true, /\.(js|css|less|png|gif)$/));
   
   $(document).ready(function () {
   	App.run();
   });

• 现在您必须学习 @nettpack/core 中的 "如何将另一个供应商包文件插入到构建集合中"

• 现在您可以使用类似这样的 sagas 创建 ComponentClass

   if (module.hot) {
   	module.hot.accept();
   }
   
   import {App, BaseComponent, SAGA_REDRAW_SNIPPET, Saga, Reducer} from "Stage"
   
   class TestControlComponent extends BaseComponent {
   
   	initial() {
   		super.initial();
   		this.installPlugins();
   	}
   
   	@Saga(SAGA_REDRAW_SNIPPET)
   	public installPlugins(action = null){
   		let target = document;
   		if (action) {
   			const {content} = action.payload;
   			if (content) {
   				target = content
   			}
   		}
   	}
   }
   App.addComponent("TestControlComponent", TestControlComponent);

  • 在 App 启动函数运行后启动 initial 函数；
  • 注释 @Saga('TYPE_NAME')
    • TYPE_NAME 事件名称
    • 可能在事件触发后运行的功能（此动作已插入参数 action，这是动作对象 /vendor/nettpack/stage/src/Assets/Action.js）
    • SAGA_REDRAW_SNIPPET - 在重新绘制片段动作后触发

• 如果您想在您的组件上运行 saga，可以使用 php 注释。

   use NettPack\Stage\Annotations as NP;
  
   /**
    * @NP\NettPack(snippetSagas={
    *     @NP\SnippetSaga(saga="SAGA_MY_COMPONENT", snippet="snippet--my-component")
    * })
    */
   class MyComponent extends Control
   {
   }

  • 在 redrawControl my-component 后触发 saga 事件 SAGA_MY_COMPONENT 并设置此事件上的回调

   @Saga('SAGA_MY_COMPONENT')
   public myFunction(action) {}

• 如果您想在 Ajax 动作运行后运行另一个 saga，请将参数 'saga' 和值 'name_of_saga_may_be_run_after_response' 放置在请求数据或参数中

   const formData = new FormData(form[0]);
   formData.append('saga','name_of_saga_may_be_run_after_response');
   $.ajax({
   	type: 'POST',
   	url: form[0].action ,
   	data: formData,	
   });

• 如果您想将自定义参数传递给 saga，请使用函数 addSagasParameter

   import {addSagasParameter} from "Stage";
   const formData = new FormData();
   addSagasParameter(formData, 'paramName', 'paramValue');
   

缩减器

• BaseComponent 包含 createReducer 函数

  • 缩减器是为了更改您应用程序 store 中的当前状态，通过监听 sagas 事件。

• 缩减器示例

@Reducer('TEST')
public testReducer(state = {
       	myObject: {
       		A: undefined,
       		B: undefined,
       	}
       }, action) {
       	switch (action.type) {
       		// Listening on TEST_SAGA and save new State from payload
       		case 'TEST_SAGA': {
       			const myObject = action.payload.myObject;
       			return Object.assign({}, state, {
       				myObject,
       			});
       		}
       		default: {
       
       			return state;
       		}
       	}
       }

• 您可以从 App 调用此缩减器

App.getStore().dispatch({
	type: 'TEST_SAGA',
	payload: {
		myObject: {
			A: "TEST_A",
			B: "TEST_B",
		}
	},
});
		

• 在浏览器中的 devTools 中，在 adminMode 下，您可以在 Test 对象（my testReducer）中看到 'prev state' 和 'next state' 的更改