菜单

React-Native 之 redux 与 react-reduxmg娱乐场www4355com

2019年3月5日 - mg娱乐场www4355com

前言


redux简介


译注:

WebSocket:被誉为下一代客户端与服务端的异步通讯格局。取代了单个的TCP套接字,使用ws或wss协议,可用来任意的客户端和服务器程序。WebSocket如今由W3C实行规范。首要的优点是服务器和客户端能够并行互相推送音信,允许跨域通讯。

redux 供给知识


mg娱乐场www4355com 1

mg娱乐场www4355com 2

react-redux 必要领悟的这多少个事


注:

  • 函数将被调用三回。第2遍是安装参数,第二遍是组件与 Redux store
    连接 connect(mapStateToProps, mapDispatchToProps,
    mergeProps)(MyComponent)。

  • connect 函数不会修改传入的 React 组件,再次来到的是二个新的已与 Redux
    store 连接的组件,而且你应有选取这些新组件。

  • mapStateToProps 函数接收整个 Redux store 的 state 作为
    props,然后回到三个传出到零部件 props 的对象。该函数被称之为
    selector。参考使用 reselect 高效地组合多少个 selector ,并对
    收集到的数目开始展览处理。

  • bindActionCreators 的功能就是将 Actions 和 dispatch 组合起来生成
    mapDispatchToProps 须要转移的始末。

  • 是或不是又懵圈了?这实在没要求想得太复杂,只可是是组件那边实行了三次封装,其他并没有太大的变动,那边给诸位观者又画了张图扶助通晓:

mg娱乐场www4355com 3

选用前准备


react-redux 使用


mg娱乐场www4355com 4

mg娱乐场www4355com 5

        import { connect } from 'react-redux';
        import { changeText } from '../redux/action/action';
        import TestText from '../components/TestText';


        class Main extends Component {
            render() {

                // 通过 props 拿到保存的 onChangeText
                const { onChangeText } = this.props;

                return (
                    <View style={styles.container}>
                        {/* 需要改变的组件 */}
                        <TestText {...this.props} />

                        {/* 按钮 */}
                        <TouchableOpacity
                            onPress={onChangeText}
                        >
                            <Text>改变文字按钮</Text>
                        </TouchableOpacity>
                    </View>
                );
            }
        }

        const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
        });

        // 获取 state 变化
        const mapStateToProps = (state) => {
            return {
                // 获取 state 变化
            }
        };

        // 发送行为
        const mapDispatchToProps = (dispatch) => {
            return {
                // 发送行为
            }
        };

        // 进行第二层包装,生成的新组件拥有 接收和发送 数据的能力
        export default connect(mapStateToProps, mapDispatchToProps)(Main);

mg娱乐场www4355com 6

小结论

  • 实际上从上边包车型大巴 demo 就足以看看,使用了 redux
    的品种变得比原来要复杂得多,原本几句代码就能消除的业务未来要来个
    山路十八弯 ,那是因为 redux
    是为着化解复杂工程而孕育的,所以并非为了接纳 redux
    而去行使它,使用在此以前须要权衡一下优缺点,个中的好与坏只可以自身逐步体会。

  • redux
    对于刚(Yu-Gang)入门的恋人的话的确相比绕,支持理解的办法正是多练,假如只看的话可能会越看越乱,所以依然建议多练,纯熟之后就感觉没什么了。

中间件


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图