【问题标题】:Correct way to use immutablejs (toJS and fromJS) with redux在 redux 中使用 immutablejs(toJS 和 fromJS)的正确方法
【发布时间】:2019-04-10 17:32:27
【问题描述】:

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

  1. 我在向 saga 发送数据时使用toJS()
  2. 不使用 fromJS() 在reducer 中,因为我认为无论如何我使用fromJS() 来表示initialState。还是我错了?
  3. 我在reselect 的选择器中使用toJS(),所以我可以在反应组件中使用js 数据。

例子:

1) 在我的反应组件中,我这样做:

// 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 和不可变之间的正确转换流程。或者它可以以某种方式优化(更少的转换步骤)?也许以上是一种非最佳的逻辑方式?

最好的问候

【问题讨论】:

    标签: javascript reactjs redux immutable.js


    【解决方案1】:
    1. 传奇——作为 redux 中间件——可以直接处理不可变类型,无需在此处使用昂贵的 toJS 调用

    2. 您要转换的任何点(例如 setsetInupdate 等)一个普通的 JS 非简单类型到不可变的 redux 状态树,使用 fromJS 以确保完全不可变类型Make entire state tree immutable

    3. 恕我直言,选择器(例如 reselect)——通过在初始检索后提供记忆——可能是利用昂贵的 toJS 调用的最理想位置,如您的示例 #3 中所示。我想这真的取决于一个人有多不喜欢在他们的“容器/智能”组件中使用不可变检索方法,和/或创建一大堆选择器来从 redux 状态树中检索简单的 JS 类型Use Immutable everywhere

    对我来说,问题是在哪里实际使用 fromJS 调用,例如动作创建者,在“容器/智能”组件中调度,或者在减速器中,例如react-boilerplate 在 reducer 中使用 fromJS 调用。

    【讨论】:

    • 谢谢,但在 1) 如果在示例中不使用 toJS() 会出错。
    • @user1665355 values 是不可变类型还是在那个实例中是 fromJS
    • values 来自 redux-form,是的,它们是不可变的 Map
    • 澄清一下,我在 1) 中使用 toJS(),因为我将这些值传递给需要纯 js 值的 fetch
    • 你是对的,react-boilerplate 在 reducer 中使用 fromJS,他们在选择器中使用 toJS :)
    猜你喜欢
    • 1970-01-01
    • 2018-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-20
    • 2016-03-03
    相关资源
    最近更新 更多