前后端redux
前后端redux
koa-cola集成了react-redux方案
server端redux:
使用react-redux组件,但是无法获得controller返回的props
1 2 3 4 5 6 7 8
| import { connect } from 'react-redux' const Index = function({some_props}) { return <h1>Wow koa-cola!</h1> } export default connect( mapStateToProps, mapDispatchToProps )(Index)
|
或者是经过Cola装饰器封装的react-redux:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| const {Cola} = require('koa-cola/client');
@Cola({ initData : { foo : async ({ params, helpers}) => { return await Promise.resolve('this will go to this.props.some_props') } }, mapStateToProps, mapDispatchToProps }) class Index extends React.Component<Props, States> { constructor(props: Props) { super(props); } render() { return <h1>{this.props.foo}</h1> } }; export default Index
|
client端的redux
在client可以使用上面所有形式的react组件的redux数据流开发模式,并且没有server端只能在render前使用的限制,可以在组件的生命周期任何时候使用。
但是client端的redux store会依赖server端,如果server端的store已经经过一系列的数据流操作,那么将会在render阶段之前的数据保存起来,作为client端react-redux的初始化数据(详细查看redux的createStore),那么这样就可以完美地redux数据流从server端无缝衔接到client端。