如何通过Redux更改组件状态

Question

在主页上的应用程序中，我没有使用Redux，而只是声明了一个state = object并使用setState更改了其状态-一切正常。帮助我了解如何使用Redux。在第二个屏幕上有一张桌子。如何单击“更新”按钮来更改表标题？

import React, { Component } from 'react'
import {
  ScrollView,
  View,
  Text,
 Button,
} from 'react-native'

import {    
    Table,
    TableWrapper,
    Row,
    Rows,
    Col
} from 'react-native-table-component'

import { connect } from 'react-redux'

import styles from './Styles/TableScreenStyle'

class TableScreen extends Component {

  render () {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.containerT}>
             <Table borderStyle={{borderWidth: 1}}>
             <Row data={this.props.tableHead} flexArr={[2, 1, 1, 1, 1]} style={styles.headT} textStyle={styles.textT}/>
             <TableWrapper style={styles.wrapperT}>
                <Col data={this.props.tableTitle} style={styles.titleT} heightArr={[28,28,28,28]} textStyle={styles.textT}/>
                <Rows data={this.props.tableData} flexArr={[1, 1, 1, 1]} style={styles.rowT} textStyle={styles.textT}/>
             </TableWrapper>
           </Table>
        </View>
        <View style={{marginBottom: 20}}>
          <Button
            title="Update"
            onPress={() => this.setState({tableHead: ['', 'А', 'B', 'C', 'D']})}
          />
        </View>
        <Button
          title="Home"
          onPress={() => this.props.navigation.goBack()}
        />
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  /* What code should be here? */
  return {

    tableHead : ['', 'Store 1', 'Store 2', 'Store 3', 'Store 4'],
    tableTitle: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Total:'],
    tableData: [
                 ['1', '2', '3', '3'],
                 ['4', '5', '2', '8'],
                 ['1', '2', '3', '3'],
                 ['7', '5', '2', '9'],
                 ['13', '14', '10', '23'],
               ]
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
          /* What code should be here? */
          setHeads: (tableHead) => dispatch(setHeads(tableHead))
      }
    }

export default connect(mapStateToProps, mapDispatchToProps)(TableScreen)

这是主屏幕代码：

import React, { Component } from 'react'
import {
  ScrollView,
  Image,
  View,
  Button,
  Text,
  Picker
} from 'react-native'

import { Images } from '../Themes'

// Styles
import styles from './Styles/LaunchScreenStyles'
import Colors from '../Themes/Colors'

export default class LaunchScreen extends Component {
static navigationOptions = {
title: 'Home',
    headerStyle: {
      backgroundColor: Colors.blue,
    },
    headerTintColor: Colors.white,
    headerTitleStyle: {
      fontWeight: 'bold',
    },

  };
  state = {
         city: 'Dnepr',
         package: 'Set 1',
  }

  render () {
    return (
      <View style={styles.mainContainer}>

        <ScrollView style={styles.container}>
          <View style={styles.centered}>
            <Image source={Images.launch} style={styles.logo} />
          </View>

          <View style={styles.section} >
            <Text h4 style={{ textAlign: 'left', color: 'black', marginLeft: 15 }} >City</Text>
            <Picker
              selectedValue={this.state.city}
              style={{height: 50, width: 200, marginLeft: 15}}
              onValueChange={(itemValue, itemIndex) =>
              this.setState({city: itemValue})
            }>
              <Picker.Item label="Dnepr" value="Dnepr" />
              <Picker.Item label="Kiev" value="Kiev" />
            </Picker>
          </View>
          <View style={styles.section} >
            <Text h4 style={{ textAlign: 'left', color: 'black', marginLeft: 15 }} >Set</Text>
            <Picker
                selectedValue={this.state.package}
                style={{height: 50, width: 200, marginLeft: 15}}
                onValueChange={(itemValue, itemIndex) =>
                this.setState({package: itemValue})
            }>
                <Picker.Item label="Set 1" value="Set 1" />
                <Picker.Item label="Set 2" value="Set 2" />
                <Picker.Item label="Set 3" value="Set 3" />
            </Picker>
          </View>
          <View style={styles.section} >
            <Button
               title="Table"
               onPress={() => this.props.navigation.navigate('TableScreen')}
            />
          </View>

        </ScrollView>
      </View>
    )
 }
}