Question

如何在react redux应用程序中使用不可变的js？我正在尝试使用，但我无法使用它。

我想在我的反应应用程序中使用immutable.js。我在我的反应应用程序中使用redux。我正在尝试在reducer中使用immutable.js.我没有得到如何更新状态＆amp;从州中删除数据。

Answer 1

我使用redux-immutable。它在README。

中有非常简单的使用说明

Answer 2

这是一个非常微不足道的减速机。我认为只要您了解immutable-js的数据结构及其方法，就可以简单地将不可变的 数据结构与redux结合使用操作 即可。这里是一个reducer，它充当不可变映射的包装器。并不是说你们每个人都会这样做，只是想展示一个简单的例子。

请注意，我总是返回状态操作，因为每个状态操作都返回一个＆＃34;新版本＆＃34;国家

希望这有帮助

import { Map } from ‘immutable’;
function reducer (state = Map(), action) {
  switch(action.type) {
    case 'update':
      return state.set(action.key, action.value);
    case 'delete': 
      return state.delete(action.key)
    default:
      return state
  }
}

Answer 3

你需要做一些事情。 redux-immutable对于使用不可变的combineReducers很有用。

基本上，整个state必须是Immutable.Map({})

等不可变对象

然后你应该使用“高阶有序组件”（HOC）将不可变量转换为常规JS对象。

// reducers.js
import { connect } from 'react-redux'

import { toJS } from './toJS'
import DumbComponent from './dumb.component'

const mapStateToProps = state => {
  return {
    // obj is an Immutable object in Smart Component, but it’s converted to a plain
    // JavaScript object by toJS, and so passed to DumbComponent as a pure JavaScript
    // object. Because it’s still an Immutable.JS object here in mapStateToProps, though,
    // there is no issue with errant re-renderings.
    obj: getImmutableObjectFromStateTree(state)
  }
}
export default connect(mapStateToProps)(toJS(DumbComponent))

https://gist.github.com/quangv/52d7cf1b39b0611b4029e309e47944e2

// toJS.js
import * as React from 'react'
import { isCollection } from 'immutable'

/* Pass regular JS objects instead of Immutables to "dumb" components.
 *
 * http://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props
 */
export default Component => props => {

  const propsJS = Object.keys(props).reduce( function(newProps, key) {
    const value = props[key]

    if (isCollection(value)) {
      newProps[key] = value.toJS()  // convert Immutable to regular JS.
    } else {
      newProps[key] = value
    }

    return newProps

  }, {} )

  return <Component {...propsJS} />
}

退房：http://redux.js.org/docs/recipes/UsingImmutableJS.html

反应还原应用中的不可变js

3 个答案: