javascript - Redux 和 immutable js，我在尝试使用 immutable 后失去了状态

Question

在开始使用 reactjs 和 redux 进行开发之后，我认为在使用 redux 的同时使用 immutable.js 会更好。

但是...也许我是智障，或者在正确使用它之前需要一些练习，一切都崩溃了。

如果您能帮助理解这里出了什么问题，那就太棒了!

所以，这是我的第一个代码:

export function posts(state = {
  isFetching: true,
  didInvalidate: false,
  items: []
}, action) {
  switch (action.type) {
    case INVALIDATE_REQ:
        return Object.assign({}, state, {
            didInvalidate: true
        });
    case REQUEST_POSTS:
        return Object.assign({}, state, {
            isFetching: true,
            didInvalidate: false
        });
    case RECEIVE_POSTS:
        return Object.assign({}, state, {
            isFetching: false,
            didInvalidate: false,
            items: action.posts
        });
    default:
      return state;
  };
};

我这样改造的:

const initPostState = Map({
  isFetching: true,
  didInvalidate: false,
  items: []
});
export function posts(state = initPostState, action) {
  switch (action.type) {
    case INVALIDATE_REQ:
      return state.set('didInvalidate', true);
    case REQUEST_POSTS:
      return state.set({
        isFetching: true,
        didInvalidate: false
      });
    case RECEIVE_POSTS:
      return state.set({
        isFetching: false,
        didInvalidate: false,
        items: action.posts
      });
    default:
      return state;
  };
};

还有我的容器 MapStateToProps:

function mapStateToProps(state) {
  const {
    posts: isFetching,
    posts
  } = state.posts;

  console.log(state);
 ...

所以问题是，我如何访问我的状态？状态控制台报告:

我迷路了!帮助!

Answer 1

切勿在 mapStateToProps 中使用 toJS()。来自 Redux 文档:

Converting an Immutable.JS object to a JavaScript object using toJS() will return a new object every time. If you do this in mapSateToProps, you will cause the component to believe that the object has changed every time the state tree changes, and so trigger an unnecessary re-render.

如果您的应用需要高性能，您必须在 Dumb 组件中使用 Immutable.js 及其 get() 和 getIn() 帮助程序。

Also since ImmutableJS has versatile API, in most cases it removes the need for helper libraries like lodash.

但在大多数情况下，您可以使用他们建议的代码通过牺牲性能将 Immutable.js 与您的组件分开。

一个 HOC 组件(使用 isIterable 谓词的最新 immutable.js):

import React from 'react';
import { Iterable } from 'immutable';

export const toJS = (WrappedComponent) =>
   (wrappedComponentProps) => {
       const KEY = 0;
       const VALUE = 1;

       const propsJS = Object.entries(wrappedComponentProps)
            .reduce((newProps, wrappedComponentProp)  => {
                newProps[wrappedComponentProp[KEY]] = 
                    Iterable.isIterable(wrappedComponentProp[VALUE]) 
                        ? wrappedComponentProp[VALUE].toJS() 
                        : wrappedComponentProp[VALUE];
                return newProps;
            }, {});

       return <WrappedComponent {...propsJS} />
   };

HOC 组件(使用 isImmutable 谓词的最新 immutable.js):

import React from 'react';
import { isImmutable } from 'immutable';

export const toJS = (WrappedComponent) =>
   (wrappedComponentProps) => {
       const KEY = 0;
       const VALUE = 1;

       const propsJS = Object.entries(wrappedComponentProps)
            .reduce((newProps, wrappedComponentProp)  => {
                newProps[wrappedComponentProp[KEY]] = 
                    isImmutable(wrappedComponentProp[VALUE]) 
                        ? wrappedComponentProp[VALUE].toJS() 
                        : wrappedComponentProp[VALUE];
                return newProps;
            }, {});

       return <WrappedComponent {...propsJS} />
   };

使用方法:

import { connect } from 'react-redux';

import { toJS } from './to-js';

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));

Redux 中有很多链接可以继续 immutable-js-best-practices文档部分。