React-Native与Redux中mapStateToProps取的store数据是否要传入useState渲染？

核心结论 #

不需要将mapStateToProps拿到的userFollowedAccounts传入useState，可以直接在组件中读取渲染。

原理说明 #

• Redux和组件绑定后，store数据更新会自动同步到对应的组件props上，同时触发组件重新渲染，直接读取props即可拿到最新的关注列表数据。
• 若你强行将props作为useState的初始值，反而会出现数据不同步问题：useState的初始值仅在组件第一次挂载时生效，后续Redux store更新userFollowedAccounts时，本地state不会自动同步最新值，除非额外写useEffect监听props变化更新state，属于冗余操作。

正确代码示例 #

import React, { useEffect } from 'react'
import { View, Text } from 'react-native'
import { connect } from 'react-redux'
// 引入你之前定义的拉取关注列表的action
import { fetchUserFollowedAccounts } from './yourActionPath'

function FollowedAccountsPage(props) {
  // 直接解构props里的Redux数据即可，不需要存入本地state
  const { userFollowedAccounts, fetchUserFollowedAccounts } = props

  // 组件挂载时触发拉取数据的action
  useEffect(() => {
    fetchUserFollowedAccounts()
  }, [fetchUserFollowedAccounts])

  return (
    <View>
      <Text>我关注的账号</Text>
      {userFollowedAccounts?.map(account => (
        <View key={account.id} style={{ padding: 10 }}>
          <Text>{account.userName}</Text>
        </View>
      ))}
    </View>
  )
}

const mapStateToProps = state => ({
  userFollowedAccounts: state.accountState.userFollowedAccounts
})

export default connect(mapStateToProps, { fetchUserFollowedAccounts })(FollowedAccountsPage)

特殊场景说明 #

只有当你需要对该数据做不需要同步回Redux的临时本地修改时，才需要存入本地useState，比如：

• 关注列表的本地关键词筛选
• 列表项的临时编辑，未提交到服务端前不需要修改Redux数据

内容的提问来源于stack exchange，提问作者flaneurx