分享一个 react + redux 完整的项目,同时写一下个人感悟

#44

是的

#45

:confused:

#46

求分享代码

#47

楼主你好。我使用react-redux的过程有一个问题很费解。希望能得到解答,万分感谢。

在connect方法生成容器组件的时候,大家都说如果在mapStateToProps中传入ownProps参数,那么ownProps的变化也会触发ui组件的更新。

但是我实际操作如下,却没有达到预期的效果:

  • 生成容器组件
const mapStateToProps = (state, ownProps) => {
    return {
        ...ownProps,
        visibleTodos: showTodos(state.todos, state.filterString)
    }
};
const MyApp = connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default MyApp
  • 使用容器组件
var config = {
    text: 'todo list'
};
ReactDom.render((
    <Provider store={store}>
        <MyApp {...config} />
    </Provider>
), document.getElementById('app'));

到这一步骤,没有问题,可以正常渲染,如下图:

  • 改变config
setTimeout(function() {
    config.text = 'new todo list';
}, 2000);

我间隔两秒,将config改变,也就是传入的容器组件的ownProps被改变。但是页面没有刷新。

这个问题困惑我很久了。。。希望楼主有空能帮忙解答一二,不胜感激!!!

#48

组件属性的更新是自上而下的形式,也就是父组件传递新的属性给子组件,触发子组件的更新。你直接定义一个对象作为属性,虽然改变了config的值,但是组件并不知道config发生了变化

#49

那请问我想达到这样的效果:

直接改变传入的config,就让ui组件刷新应该怎么做呢?(不放到store中,只改变传入的属性)

#50

可以再套一层组件,把config作为属性传给MyApp组件

1 Like
#51

最近在学习react,还没有来得及看。这篇文章看着非常详细,先存下来,感谢楼主的热心分享。

#52

客气了,别人的分享让我少走很多弯路,如果大家都愿意分享,那么对所有人都会有好处的

#53

源码地址更改:https://github.com/bailicangdu/react-pxq

#55

很赞,总结的这些坑点我踩了不少

#56

2017.1.10

修复热替换无法正常使用的bug,使用react-hot-loader 代替以前的react-transform 。

1 Like
#57

100000+ 赞分享 很多小伙伴在这里交流,扔下一只勾搭帖 http://react-china.org/t/react/10487

#58

@bailicangdu 跟着你的总结思考,让我的思路也清晰了很多:grin:。那张React组件生命周期的流程图有两点错误:开始的节点名字是Start;组件卸载事件 componentWillUnmount写成了compnentWillMount。

#59

赞一个:clap:

#60

不错不错,谢谢分享

#61

谢谢提醒

#62

我在git上下载了你的项目运行起来貌似css文件没有被加载进去。

#63

请问这个是什么报错呢

#64

https://www.npmjs.com/package/babel-plugin-transform-class-properties 这个地址应该可以解决你的问题