在Redux上使用Immutablejs(toJS和fromJS)的正确方法 [英] Correct way to use immutablejs (toJS and fromJS) with redux

问题描述

我想知道这是否是将immutable.js与redux和reselect(也是redux-saga)结合使用的正确方法.具体来说，我想知道toJS()和fromJS()的用途以及在哪里使用它们. 我的想法是:

I wonder if this is a correct way to use immutable.js with redux and reselect (also redux-saga). Specifically I wonder about toJS() and from fromJS() and where to use them. My idea is that:

1. 在将数据发送到传奇时使用toJS().
2. 我不要在精简器中使用 fromJS()，因为我认为无论如何都可以通过将fromJS()用于initialState来完成.还是我错了?
3. 我在reselect的选择器中使用了toJS()，因此我可以在react组件中使用js数据.

1. I use toJS() when sending data to a saga.
2. I do not use fromJS() in reducer because I think that it is done anyway by the fact that I use fromJS() for initialState. Or am I wrong about that?
3. I use toJS() in selector from reselect so I can use js data in react component.

示例:

1)在我的react组件中:

1) In my react component I do:

// 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文档，您应该使用):

2) In reducer I do (should one use fromJS() here or not? According to redux docs you should):

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():

3) In my selector I do toJS() again:

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和不可变之间的正确转换流程.还是可以通过某种方式(更少的转换步骤)对其进行优化?也许以上是一种非最佳的逻辑方式?

So basically I wonder if that is a correct flow of convertion between js and immutable. Or can it be optimized in some way (less convertion steps)? Maybe the above is a non-optimal way of logic?

最好的问候

推荐答案

1. 传奇-Redux中间件-可以直接处理不可变类型，无需在此处使用昂贵的toJS调用

您要转换的任何点(例如set，setIn，update等)都将纯JS非简单类型转换为Immutable redux状态树，请使用fromJS来确保完全不可变类型完整状态树不可变

Any point you're converting (e.g. set, setIn, update, etc) a plain JS non-simple type into the Immutable redux state tree, use fromJS to ensure a fully Immutable type Make entire state tree immutable

恕我直言，选择器(例如reselect)-通过在初始检索后提供备忘录-可能是使用昂贵的toJS调用的最理想位置，如您的示例#3.我猜这真的取决于有多少人不喜欢在其容器/智能"组件中使用不可变的检索方法，和/或创建一堆选择器以从redux状态树中检索简单的JS类型.

IMHO, selectors (e.g. reselect)--by providing memoization after the initial retrieval--can be the most ideal place to utilize the expensive toJS calls, as in your example #3. I guess it really depends upon how much one dislikes using Immutable retrieval methods in their "container/smart" components, and/or creating a whole bunch of selectors to retrieve simple JS types from the redux state tree Use Immutable everywhere

对我来说，存在一个问题，即在哪里实际使用fromJS调用，例如动作创建者，在容器/智能"组件中调度，或者在简化器中，例如react-boilerplate在reducer中使用fromJS调用.

To me there's the question of where to actually use the fromJS call, e.g. action creators, in the "container/smart" components dispatch or, in the reducer, e.g. react-boilerplate uses the fromJS call in the reducer.

这篇关于在Redux上使用Immutablejs(toJS和fromJS)的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！