RN redux的一点疑惑



  • RN本来初学,redux实在有点复杂,求解惑。
    对照社区例子自己写了个demo,核心代码如下:
    使用Navigator加载TabViewTabView里有3个简单tab页:

    class App extends React.Component {
    
      render() {
            let { navigationState, onNavigate } = this.props
    
            return (
          <View style={styles.container}>
            <Navigator
                initialRoute={{name: 'TabView', component: TabView}}
                configureScene={()=>{
                    return  Navigator.SceneConfigs.PushFromRight;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return (
                        <Component navigator = {navigator} route = {route} {...route.passProps} {...this.props} />
                    )
                }}
            />
          </View>
            )
        }
    }
    

    TabView.js:

    const tabBarItems = [
        {name:'index', title: '首页', icon: 'md-home', component: ListContainer},
        {name:'add', title: '发布任务', icon: 'md-add', component: AddQuestContainer},
        {name:'my', title: '我的', icon: 'md-person', component: ProfileContainer},
    ]
    
    export default class TabView extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              selectedTab: tabBarItems[0].name
          };
      }
      render() {
        return (
          <TabNavigator>
            {
              tabBarItems.map( (page, i) => {
                let Component = page.component;
                return (
                  <TabNavigator.Item
                    key={i}
                    selected={this.state.selectedTab === page.name}
                    renderIcon={() => <Icon name={page.icon} style={styles.itemStyle}/>}
                    title={page.title}
                    onPress={() => this.setState({ selectedTab: page.name })}>
    
                    <Component navigator = {this.props.navigator} {...this.props}/>
                  </TabNavigator.Item>
                )
              } )
            }
          </TabNavigator>
        );
      }
    }
    

    第一个Tab:

      render() {
        const {ListReducer} = this.props.state;
    
        let list = ListReducer.contents;
        return (
            ListReducer.isLoading
            ?
            <Loading/>
            :
            <ScrollView>
              <ListView
                dataSource={this.state.dataSource.cloneWithRows(list)}
                renderRow={this._renderRow}
                enableEmptySections={true}
                bounces={false}
                showsVerticalScrollIndicator={false}
                style={styles.listView}
              />
            </ScrollView>
        );
      }
    
      _renderRow(data){
        return (
            <Card {...data}></Card>
        )
      }
    };
    

    action就是一个异步加载数据的,就不贴了,Reducer

    import * as types from '../actions/actionTypes';
    const initialState = {
        contents: [],
        isLoading: true
    };
    
    let ListReducer = (state = initialState, action) => {
    
        switch (action.type) {
            case types.FETCH_LIST:
            return Object.assign({}, state, {
                isLoading: action.isLoading
            })
            case types.RECEIVE_LIST:
                return Object.assign({}, state, {
                    contents: action.contents,
                    isLoading: false
                })
            default:
                return state;
        }
    }
    
    export default ListReducer;
    

    container:

    import React from 'react';
    import {connect} from 'react-redux';
    import List from '../pages/List';
    
    class ListContainer extends React.Component {
        render() {
            return (
                <List {...this.props} />
            )
        }
    }
    
    export default connect((state) => {
        // const {List} = state;
        return {
            state: state
        }
    })(ListContainer);
    

    跑起来没什么问题,有几点疑惑:

    1. 什么时候使用state,什么时候使用props
    2. 我看别人的代码connect好像不是怎么写的,这对吗?
    3. 第一个tab里render第一行const {ListReducer} = this.props.state;我看到别人的代码都没有state,是因为我把state连到了props里面的原因吗?(类似问题1)
    4. const {ListReducer} = this.props.state;ListReducer的名称必须和export一致?
    5. 最后,我初步理解了一下redux,想问按照redux的逻辑,Navigator页面跳转是不是也应该放进来,可行吗?如何写啊?表示不懂如何下手

    谢谢大神答疑了。



    1. 私有状态用 state, 全局状态用 props, Redux 是一个奇怪的方案, 通过 props 注入
    2. 是的, 但是这种浏览器状态比较复杂, 需要借助已有的类库 https://github.com/aksonov/react-native-router-flux

登录后回复