江苏龙网

  1. 首页 > 生活 > >

redux和react-router一起使用时怎样向子组件传递store和reducers

谢邀。不，你错了。state 不是靠 react-router 或者 react-router-redux 来传递的，而是 provider 和 connect 。你的组件要用到 state ，先用 provider ，把 store 绑定到 context 上往下传，再在各子组件里导出一个 connect() 过的 wrapped component ，这跟你用什么 router 无关。react-router-redux 只是把 router 状态 bind 到 state 上而已。====== 正文结束，以下私货 =======这样的话每个子组件都要引入connect和bindActionCreators方法，并实现connect方法，会有大量重复代码。有没有一种方法可以只在顶层App组件内实现一次connect，然后通过props把todos和actions往下传递的方法呢？react / redux 以 boilerplate code 著称，嫌麻烦可以用 vuex ，导出的是 js plain object ，由 vuex 代替你来生成 wrapped component ，不用自己手动调用 connect() 。例如如下这个例子， import actions （redux 里的 action creator） 、pure function getters ，跟用 redux 是一样的，但简化了 provider、connect() 。vuex/App.vue at master · vuejs/vuex · GitHub
■网友
Redux下面的Reducers都是平级的，内部使用context传的，不管多少层嵌套都会直接分发所以说你实际上应该完全无视React-router就好了看了题主的答案里面又提出的反复connect的问题，这个是Redux的设计决策，也就是Redux本身:1.不和React耦合，所以要通过React-redux connect2.不和组件耦合，你要自己mapState和mapDispatch / mapActions，这样扩展和性能不会有问题，因为connect是高度优化过的函数，有关于性能的极端hack以下是我以前在用的一种opinionated的优化办法，简单地说就是认为reducer大多数情况都和一个container组件绑定，并且我也不太关心把整个state注入带来的性能问题，于此同时更关心代码好写好读：很多人，包括我，也和题主有一样的问题：我的应用并不关心性能，代码简单才是好的。一般来说一个Reducer对应一个container，他们俩一定connect，所以可以这里可以抽出来一个helper，建立reducer的时候会自动connect，并且connect整个state，借助Redux的dynamic reducer功能可以动态添加Reducer，所以最终你能实现类似这样的api： @myConnect(\u0026#39;counter\u0026#39;, 0, { increment: state =\u0026gt; state + 1, decrement: state =\u0026gt; state - 1, add: (state, payload) =\u0026gt; state + payload }) class Counter extends Component { render() { const { state, increment, decrement, add } = this.props return ... } }以上api其实不难实现，myConnect是一个高阶函数，接受实现了动态添加Reducer的store，然后返回一个你自己的新版connect，这个connect再接收reducer名字，初始状态，和一个可以作为reducer的handler：一个关键点是handler的键名会作为action名字直接注入container的props中，然后就可以和平常一样用了。这样扔掉了action声明，扔掉了绑定，然后因为reducer是动态添加的，store本身也被库封装了。增加一个reducer和container只需要以上的代码就完成了一个前端应用中的一个小应用的逻辑：其实很多朋友都能发现，其实就是把react component的方法上移到了decorator中，而这样做的好处就是这个decorator中handler的方法发的是全局action，这样一样能解决react自己很难解决的通信问题。当然这样一定还有人会问handler键作为action名很容易重名，这样组件通信就会有很多冲突，我这么处理的：给handler键加一个命名空间，如果reducer叫counter1，他的action name其实会叫做counter1_increment发出去，但是注入action props的时候会同时注入counter1_increment和increment到props，这样本组件就可以用简单的名称，如果有counter2也同理，这样组中的效果是counter1和counter2 props中的increment都是作用自己的state，而counter1中的counter2_increment会作用在counter2的state上。此外要dispatch redux-form或者react-router-redux之类的情况经常没办法直接不加引号做键，可以直接在props直接用字符串访问，也可以加一个特例可以指定action名注入成另外一种props。最后还有个问题是很多reducer其实和view无关，不用绑定组件，这种情况直接把这个decorator直接创建出来就好了，也就是以上代码扔掉@和下面的class，一样能创建一个reducer作为单独的模块。最近换了工作，不能用react了（悲惨），最近时间比较仓促，在赶一另外的东西，但是有人邀请这道题，突然想分享一下经验，语言组织比较乱抱歉。但是以上是我生产上用redux半年总结出来比较好用又不引入坑的办法（试过很多改造redux的方法基本都有坑），大家感兴趣可以留言，如果很多人觉得这套api不错我可以重新组织一下语言，然后重写优化一遍发到npm上。


推荐阅读


上一篇：怎样利用社交网络营销自己

下一篇： 长寿花■“好养耐活开花勤”，养花就养这4种，手残党也会很轻松