Question

我是React的新手，对React的写作风格有疑问。问题是当从redux中创建状态时，这是更好或正常的写作风格。

1）使用connect（）和mapPropsToState（）* react-redux 2）使用store和getState（）

现在我使用'connect（）'，因为许多教程使用'connect（）'从Redux传递或获取状态。但我认为如果这些组件都有子级，则必须将Props传递给子级，就像不使用Redux一样。

它正在杀死redux的一个强点，它可以从任何层（任何地方）获得状态。

示例代码她

index.js

export let store = createStore(reducer);
<Provider store={store}>
 <Router history={browserHistory}>
  <Route component={parent}>
  </Route>
</Router>
</Provider>

render.js

class parent exteds react.Component{
 render(){
 return(
   <child test={this.props.test}/>
  )
 }
}

class child exteds react.Component{
 render(){
  return(
    <button onChange={this.props.test}/>
       or
    <store.dispatch(testfunction()>

   )
  }
 }

function mapStateToProps(state) {
console.log(state)
return {...state};
}


function mapDispatchToProps(dispatch) {
return bindActionCreators({
    test:testfunction
}, dispatch)
};

export const renderFormGenerator = connect(mapStateToProps,mapDispatchToProps)(render);

Answer 1

随着应用程序的增长，最好使用 react-redux ，而不是手动将商店传递给所有单个组件。

也就是说，connect需要进行一些小改动。您希望收到操作创建者的组件应该位于render

的位置

，而不是这个

connect(mapStateToProps,mapDispatchToProps)(render)

这样做

connect(mapStateToProps,mapDispatchToProps)(myComponent)

通过这种方式，您可以访问myComponent中的动作创建者，例如this.props.myAction()

我同意你的担心，如果以这种方式使用它，你将不得不再次手动将动作作为道具传递给孩子们。

但是，通过创建Child容器并再次使用connect，可以轻松解决这个问题。 connect(mapStateToProps,mapDispatchToProps)(myChildComponent)

我建议您阅读Dan Abramov撰写的关于Smart Vs Dumb Components的优秀文章。

在React和Redux中使用store或connect（）编写样式？

1 个答案: