React-Redux - 如何从子组件调度操作?

时间:2017-11-26 15:26:09

标签: javascript reactjs redux dispatch

我正在使用React with Redux并遇到此问题。

首先我要创建引入[ { "Execution Time": 4863.615, "Planning Time": 0.3, "Plan": { "Startup Cost": 383480149.03, "Shared Hit Blocks": 1296773, "Shared Written Blocks": 0, "Shared Read Blocks": 267565, "Plans": [ { "Temp Written Blocks": 0, "Sort Key": [ "((SubPlan 1)) DESC" ], "Node Type": "Sort", "Sort Space Used": 46, "Shared Hit Blocks": 1296773, "Plans": [ { "Node Type": "Seq Scan", "Shared Hit Blocks": 1296773, "Plans": [ { "Partial Mode": "Simple", "Node Type": "Aggregate", "Strategy": "Plain", "Shared Hit Blocks": 1296773, "Subplan Name": "SubPlan 1", "Plans": [ { "Exact Heap Blocks": 1383693, "Node Type": "Bitmap Heap Scan", "Shared Hit Blocks": 1296773, "Plans": [ { "Startup Cost": 0, "Plan Width": 0, "Temp Written Blocks": 0, "Shared Written Blocks": 0, "Shared Read Blocks": 5872, "Local Written Blocks": 0, "Node Type": "Bitmap Index Scan", "Index Cond": "(indexed_field_2 @@ to_tsquery(prt.a)", "Plan Rows": 3156, "Temp Read Blocks": 0, "Shared Dirtied Blocks": 0, "Local Hit Blocks": 0, "Parallel Aware": false, "Actual Rows": 51, "Local Dirtied Blocks": 0, "Parent Relationship": "Outer", "Total Cost": 43.68, "Shared Hit Blocks": 173739, "Actual Loops": 44742, "Local Read Blocks": 0, "Index Name": "part_ids2_idx" } ], "Shared Read Blocks": 266531, "Relation Name": "ind", "Local Hit Blocks": 0, "Local Dirtied Blocks": 0, "Temp Written Blocks": 0, "Plan Width": 16, "Actual Loops": 44742, "Rows Removed by Index Recheck": 0, "Lossy Heap Blocks": 0, "Filter": "(lower(ind.t) <> ALL ('{a,b,c}'::text[]))", "Alias": "ind", "Recheck Cond": "(indexed_field_2 @@ to_tsquery(prt.a)", "Temp Read Blocks": 0, "Local Read Blocks": 0, "Startup Cost": 44.46, "Shared Dirtied Blocks": 0, "Shared Written Blocks": 0, "Local Written Blocks": 0, "Plan Rows": 3109, "Parallel Aware": false, "Actual Rows": 51, "Parent Relationship": "Outer", "Total Cost": 8563.06, "Rows Removed by Filter": 0 } ], "Shared Read Blocks": 266531, "Temp Written Blocks": 0, "Local Dirtied Blocks": 0, "Local Hit Blocks": 0, "Plan Width": 8, "Actual Loops": 44742, "Temp Read Blocks": 0, "Local Read Blocks": 0, "Startup Cost": 8570.83, "Shared Dirtied Blocks": 0, "Shared Written Blocks": 0, "Local Written Blocks": 0, "Plan Rows": 1, "Parallel Aware": false, "Actual Rows": 1, "Parent Relationship": "SubPlan", "Total Cost": 8570.84 } ], "Shared Read Blocks": 267565, "Relation Name": "parties", "Temp Written Blocks": 0, "Local Dirtied Blocks": 0, "Local Hit Blocks": 0, "Plan Width": 24, "Actual Loops": 1, "Alias": "parties", "Temp Read Blocks": 0, "Local Read Blocks": 0, "Startup Cost": 0, "Shared Dirtied Blocks": 0, "Shared Written Blocks": 0, "Local Written Blocks": 0, "Plan Rows": 44742, "Parallel Aware": false, "Actual Rows": 44742, "Parent Relationship": "Outer", "Total Cost": 383478215.31 } ], "Shared Read Blocks": 267565, "Local Hit Blocks": 0, "Local Dirtied Blocks": 0, "Sort Method": "top-N heapsort", "Plan Width": 24, "Actual Loops": 1, "Temp Read Blocks": 0, "Local Read Blocks": 0, "Shared Written Blocks": 0, "Startup Cost": 383480149.03, "Shared Dirtied Blocks": 0, "Sort Space Type": "Memory", "Local Written Blocks": 0, "Plan Rows": 44742, "Parallel Aware": false, "Actual Rows": 200, "Parent Relationship": "Outer", "Total Cost": 383480260.89 } ], "Local Written Blocks": 0, "Node Type": "Limit", "Plan Rows": 200, "Temp Read Blocks": 0, "Shared Dirtied Blocks": 0, "Local Hit Blocks": 0, "Parallel Aware": false, "Actual Rows": 200, "Local Dirtied Blocks": 0, "Temp Written Blocks": 0, "Plan Width": 24, "Actual Loops": 1, "Local Read Blocks": 0, "Total Cost": 383480149.53 }, "Triggers": [] } ] 的{​​{1}}组件并渲染:

EditorContainer.jsx:

EditorContainer

在EditorContainer.jsx中调度动作效果很好。

但是我想在我的Editor.jsx中发布一些动作,所以我这样做:

Editor.jsx

store

当然,我在第3行收到未捕获的ReferenceError:商店未定义

不应<Provider store={store}> <Editor></Editor> </Provider>在此处完成工作并包含class Editor extends React.Component { componentWillMount() { store.dispatch(doSomething()); } render() { return ( // code ); } } const mapStateToProps = state => ({ somethingPayload: somethingPayload }); export default connect(mapStateToProps)(Editor); &amp;在我的情况下,编辑组件中的connect

1 个答案:

答案 0 :(得分:2)

您应该使用this.props.dispatch代替store.dispatch,因为dispatch功能是通过道具传递的。