alibaba/fish-redux

自定义 component 使用 dispatch报错

Opened this issue · 9 comments

wangemng commented

enum HomeBaseGoodsAction { action }

class HomeBaseGoodsActionCreator {
static Action onAction() {
return const Action(HomeBaseGoodsAction.action);
}
}

在 view页面调用dispatch(HomeBaseGoodsActionCreator.onAction())

在 effect 不会
然后在 reducer.dart 里面接收的时候就会报错

这是我的根 page 页面
WX20200822-154825

这是我的Connector页面
image

这是我的Component 页面
image

image

求结局

zsfbest commented

报错还不明显吗, called on null

wangemng commented

@zsfbest 你有例子吗 借我看一下呗 这困扰我太久了 我自动生成一个 component 在 view 中调用 dispath 就报错

zsfbest commented

@zsfbest 你有例子吗 借我看一下呗 这困扰我太久了 我自动生成一个 component 在 view 中调用 dispath 就报错

你去把官方的例子看一遍就懂了

wangemng commented

@zsfbest你有例子吗借我看一下呗这损坏我太久了我自动生成一个component在视图中调用dispath就报错

你去把官方的例子看一遍就懂了

我看了 感觉没问题阿 我估计就是 connector 有的问题 但是看着没啥毛病阿 醉了

zsfbest commented

@zsfbest你有例子吗借我看一下呗这损坏我太久了我自动生成一个component在视图中调用dispath就报错

你去把官方的例子看一遍就懂了

我看了 感觉没问题阿 我估计就是 connector 有的问题 但是看着没啥毛病阿 醉了

你把你完整的贴出来直接帮你改了

wangemng commented

以下我的 components
action

` import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum HomeActivityAction { action }

class HomeActivityActionCreator {
static Action onAction() {
return const Action(HomeActivityAction.action);
}
}

`
component

`import 'package:fish_redux/fish_redux.dart';

import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class HomeActivityComponent extends Component {
HomeActivityComponent()
: super(
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies(
adapter: null,
slots: <String, Dependent>{
}),);

}
`

effect

`import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';

Effect buildEffect() {
return combineEffects(<Object, Effect>{
// HomeActivityAction.action: _onAction,
});
}

// void _onAction(Action action, Context ctx) {
// }
`

reducer

`import 'package:fish_redux/fish_redux.dart';

import 'action.dart';
import 'state.dart';

Reducer buildReducer() {
return asReducer(
<Object, Reducer>{
HomeActivityAction.action: _onAction,
},
);
}

HomeActivityState _onAction(HomeActivityState state, Action action) {
final HomeActivityState newState = state.clone();
print("object");
return newState;
}
`
state

`import 'package:fish_redux/fish_redux.dart';

class HomeActivityState implements Cloneable {
String imageName;
@OverRide
HomeActivityState clone() {
return HomeActivityState()..imageName= imageName;
}
}

HomeActivityState initState(Map<String, dynamic> args) {

return HomeActivityState();

}
`
view

`import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
HomeActivityState state, Dispatch dispatch, ViewService viewService) {
return Container(
child: InkWell(
onTap: (){
print("sss");
dispatch(HomeActivityActionCreator.onAction());
},
child: Image.network(
state.imageName,
fit: BoxFit.cover,
),
),
);
}
`

connector

`import 'package:fish_redux/fish_redux.dart';
import 'package:rainbow_full/pages/home_page/components/home_activity_component/state.dart';
import 'package:rainbow_full/pages/home_page/state.dart';

class HomeActivityConnector extends ConnOp<HomePageState, HomeActivityState> {
@OverRide
HomeActivityState get(HomePageState state) {
HomeActivityState mstate = HomeActivityState();

return mstate;

}
}`

'home_activity1': HomeActivityConnector() + HomeActivityComponent(),

然后我在 HomePage 中添加这个 component，通过 viewService.buildComponent('home_activity1'),

`class HomePage extends Page<HomePageState, Map<String, dynamic>> {
HomePage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies(
adapter: null,
slots: <String, Dependent>{
'home_activity1': HomeActivityConnector() + HomeActivityComponent(),

          }),
      middleware: <Middleware<HomePageState>>[],
    );

}
`

wangemng commented

微信 63289734

hfbi360 commented

以下我的 components
action

` import 'package:fish_redux/fish_redux.dart';

//TODO replace with your own action
enum HomeActivityAction { action }

class HomeActivityActionCreator {
static Action onAction() {
return const Action(HomeActivityAction.action);
}
}

`
component

`import 'package:fish_redux/fish_redux.dart';

import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class HomeActivityComponent extends Component {
HomeActivityComponent()
: super(
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies(
adapter: null,
slots: <String, Dependent>{
}),);

}
`

effect

`import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';

Effect buildEffect() {
return combineEffects(<Object, Effect>{
// HomeActivityAction.action: _onAction,
});
}

// void _onAction(Action action, Context ctx) {
// }
`

reducer

`import 'package:fish_redux/fish_redux.dart';

import 'action.dart';
import 'state.dart';

Reducer buildReducer() {
return asReducer(
<Object, Reducer>{
HomeActivityAction.action: _onAction,
},
);
}

HomeActivityState _onAction(HomeActivityState state, Action action) {
final HomeActivityState newState = state.clone();
print("object");
return newState;
}
`
state

`import 'package:fish_redux/fish_redux.dart';

class HomeActivityState implements Cloneable {
String imageName;
@OverRide
HomeActivityState clone() {
return HomeActivityState()..imageName= imageName;
}
}

HomeActivityState initState(Map<String, dynamic> args) {

return HomeActivityState();

}
`
view

`import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
HomeActivityState state, Dispatch dispatch, ViewService viewService) {
return Container(
child: InkWell(
onTap: (){
print("sss");
dispatch(HomeActivityActionCreator.onAction());
},
child: Image.network(
state.imageName,
fit: BoxFit.cover,
),
),
);
}
`

connector

`import 'package:fish_redux/fish_redux.dart';
import 'package:rainbow_full/pages/home_page/components/home_activity_component/state.dart';
import 'package:rainbow_full/pages/home_page/state.dart';

class HomeActivityConnector extends ConnOp<HomePageState, HomeActivityState> {
@OverRide
HomeActivityState get(HomePageState state) {
HomeActivityState mstate = HomeActivityState();

return mstate;

}
}`

'home_activity1': HomeActivityConnector() + HomeActivityComponent(),

然后我在 HomePage 中添加这个 component，通过 viewService.buildComponent('home_activity1'),

`class HomePage extends Page<HomePageState, Map<String, dynamic>> {
HomePage()
: super(
initState: initState,
effect: buildEffect(),
reducer: buildReducer(),
view: buildView,
dependencies: Dependencies(
adapter: null,
slots: <String, Dependent>{
'home_activity1': HomeActivityConnector() + HomeActivityComponent(),

          }),
      middleware: <Middleware<HomePageState>>[],
    );

}
`

connector 需要实现 set方法，可以参考下#653

wangemng commented

以下我的component
action
import'package：fish_redux / fish_redux.dart'; //将待办事项替换为您自己的动作 枚举HomeActivityAction {action} 类HomeActivityActionCreator { 静态Action onAction（）{ 返回const Action（HomeActivityAction.action）; } }
组件
import'package：fish_redux / fish_redux.dart'; 导入'effect.dart'; 导入'reducer.dart'; 导入'state.dart'; 导入'view.dart'; 类HomeActivityComponent扩展了组件{ HomeActivityComponent（） ：super（ 效果：buildEffect（）， reducer：buildReducer（）， view：buildView， 依赖项：Dependencies（ 适配器：null， 插槽：<String，Dependent> { }），）; }
影响
import'package：fish_redux / fish_redux.dart'; 导入'action.dart'; 导入'state.dart'; 效果buildEffect（）{ return CombineEffects（<Object，Effect> { // HomeActivityAction.action：_onAction， }）; } // void _onAction（Action action，Context ctx）{ //}
减速器
import'package：fish_redux / fish_redux.dart'; 导入'action.dart'; 导入'state.dart'; Reducer buildReducer（）{ 返回asReducer（ <Object，Reducer> { HomeActivityAction.action：_onAction， }， ）; } HomeActivityState _onAction（HomeActivityState state，Action action）{ final HomeActivityState newState = state.clone（）; print（“ object”）; 返回newState; }
状态
`import'package：fish_redux / fish_redux.dart';
HomeActivityState类实现Cloneable {
String imageName;
@OverRide
HomeActivityState clone（）{
return HomeActivityState（）.. imageName = imageName;
}
}
HomeActivityState initState（Map <String，dynamic> args）{

return HomeActivityState();

}
视图import'package：fish_redux / fish_redux.dart';
导入'package：flutter / material.dart';
导入'action.dart';
导入'state.dart';
窗口小部件buildView（
HomeActivityState状态，调度调度，ViewService viewService）{
返回容器（
子：墨水瓶（
中的onTap：（）{
打印（ “SSS”）;
调度（HomeActivityActionCreator.onAction（））;
}，
小孩：Image.network（
状态.imageName，
适合：BoxFit.cover，
），
），
）;
}
连接器import'package：fish_redux / fish_redux.dart';
导入'package：rainbow_full / pages / home_page / components / home_activity_component / state.dart';
导入'package：rainbow_full / pages / home_page / state.dart';
类HomeActivityConnector扩展ConnOp <HomePageState，HomeActivityState> {
@OverRide
HomeActivityState get（HomePageState state）{
HomeActivityState mstate = HomeActivityState（）;

return mstate;

}
} 'home_activity1': HomeActivityConnector() + HomeActivityComponent(),然后我在HomePage中添加这个组件，通过viewService.buildComponent（'home_activity1'），Class HomePage扩展Page <HomePageState，Map <String，dynamic >> {
HomePage（）
：super（
initState：initState，
effect：buildEffect（），
reducer：buildReducer（），
view：buildView，
依赖项：Dependencies（
适配器：null，
插槽：<String，Dependent> {
'home_activity1'：HomeActivityConnector（）+ HomeActivityComponent（），

          }),
      middleware: <Middleware<HomePageState>>[],
    );

}
`

连接器需要实现set方法，可以参考下＃653

能否给个示例代码 看一下 connector 看一下 我添加 set 方法也不对哦。。。是在 connector 中实现 set 方法吗？ 把子组建要实现的值写在 set 方法中吗？