react native 使用 immutable

react native + redux + immutable

举一个加减的小例子

首先，安装依赖：

yarn add immutable redux-immutable 

使用 redux 时，需要改 reducer：

import { combineReducers } from 'redux-immutable'
import count from './count'
export default combineReducers({
  count
})

然后创建 count.js 组件，用来显示效果

import React, { PureComponent } from 'react'
import { Text, View } from 'react-native'
import { connect } from 'react-redux'
import { decrement, increment } from '../action/count'

class Counter extends PureComponent {
  render() {
    return (
      <View>
        <Text onPress={this.props.decrement}> decrement </Text>
        <Text> {this.props.count.get('num')} </Text>
        <Text> {this.props.count.get('name')} </Text>
        <Text> {this.props.count.get('friend')} </Text>
        <Text onPress={this.props.increment}> increment </Text>
      </View>
    )
  }
}

const mapState = state => {
  return {
    count: state.getIn(['count'])
  }
}
export default connect(mapState, { decrement, increment })(Counter)

省略配置 store.js 和 action 的步骤，直接来看 reducer 中的 count.js

import actionTypes from '../action/actionTypes'
import { fromJS } from 'immutable'


const initState = fromJS({
  num: 0,
  name: '大明',
  friend: '小红',
})

export default (state = initState, action) => {
  console.log(state)
  console.log(initState)
  switch (action.type) {
    case actionTypes.decrement:
      return (
        state
          .update('num', v => v - 1)
          .set('name', '大力')
          .set('friend', '小茜')
      )
    case actionTypes.increment:
      return (
        state
          .update('num', v => v + 1)
          .set('name', '小周')
          .set('friend', '大海')
      )
    default:
      return state
  }
} 

运行项目

运行时点击 decrement 或者 increment ，数字和文字变化的同时，initState 不会发生改变，变化的只有 state

使用 immutable 需要注意的是：

在 reducers 文件夹下的 count.js 传出的 count 对象是一个 immutable 对象，而 connect 组件接收到的是一个包含多个 immutable 对象的 immutable 对象，所以在使用 get(‘count’) 方法后得到的是 immutable对象 count,在组建 porps 中使用时，还应该再使用 get() 方法去取得 count 中的相应数据。