在 redux 中使用 immutablejs（toJS 和 fromJS）的正确方法

Question

我想知道这是否是将 immutable.js 与 redux 和 reselect（以及 redux-saga）一起使用的正确方法。具体来说，我想知道 toJS() 和 fromJS() 以及在哪里使用它们。我的想法是：

我在向 saga 发送数据时使用 toJS()。
我不在reducer中使用 fromJS()因为我认为无论如何我使用fromJS()作为initialState。还是我错了？
我在 reselect 的选择器中使用了 toJS()，所以我可以在 React 组件中使用 js 数据。

示例：

1) 在我的 React 组件中我做了：

// mapDispatchToProps
   function mapDispatchToProps(dispatch) {
      return {
         loginRequest: values => dispatch(loginRequest(values)),
      };
   }

// Sending values.toJS() to my redux-saga. 
   submit = values => {
      this.props.loginRequest(values.toJS());
   };

2) 在 reducer 中我做了（应该在这里使用 fromJS() 还是不？根据 redux 文档你应该）：

const { fromJS } = require('immutable');
const state = fromJS({
  pages: {
    usersPage: {
      loading: false,
      isFetched: false,
      list: [],
    }
  }
});
function reducer(state, action) {
  switch(action.type) {
    case 'USERS_LOADED':
      return state
        .setIn(['usersPage', 'list'], action.payload) // fromJS() here or not?
        .setIn(['usersPage', 'isFetched'], true)
        .setIn(['usersPage', 'loading'], false)
        ;
    default:
      return state;
  }
}
export default reducer;

3) 在我的选择器中，我再次执行 toJS()：

const selectUser = state => state.get('user', initialState);
const makeSelectList= () =>
   createSelector(selectUser, userState => userState.getIn(['usersPage', 
'list']).toJS());

// Which I then use in my react component:
const mapStateToProps = createStructuredSelector({
   list: makeSelectList(),
});

所以基本上我想知道这是否是 js 和不可变之间的正确转换流程。还是可以以某种方式对其进行优化（减少转换步骤）？也许以上是一种非最优的逻辑方式？

此致

Answer 1

saga——作为 redux 中间件——可以直接处理不可变类型，不需要在这里使用昂贵的toJS调用
你正在将一个普通的 JS 非简单类型（例如 set、setIn、update 等）转换为 Immutable redux 状态树，使用 fromJS 来确保完全不可变的类型 Make entire state tree immutable
恕我直言，选择器（例如 reselect）——通过在初始检索后提供记忆——可能是使用昂贵的 toJS 调用的最理想的地方，因为在您的示例 #3 中。我想这真的取决于有多少人不喜欢在他们的 "container/smart" 组件中使用不可变检索方法，and/or 创建一大堆选择器来从 redux 状态树检索简单的 JS 类型 Use Immutable everywhere

对我来说，问题是在哪里实际使用 fromJS 调用，例如动作创建者，在 "container/smart" 组件分派中，或者在 reducer 中，例如react-boilerplate 在减速器中使用 fromJS 调用。

在 redux 中使用 immutablejs（toJS 和 fromJS）的正确方法

Correct way to use immutablejs (toJS and fromJS) with redux

javascript

reactjs

redux

immutable.js