[英]Correct way to use immutablejs (toJS and fromJS) with redux
I wonder if this is a correct way to use immutable.js
with redux and reselect
(also redux-saga
). 我想知道这是否是将immutable.js
与redux一起使用并reselect
(也是redux-saga
)的正确方法。 Specifically I wonder about toJS()
and from fromJS()
and where to use them. 具体来说,我想知道toJS()
和fromJS()
以及在哪里使用它们。 My idea is that: 我的想法是:
toJS()
when sending data to a saga. 我将toJS()
发送数据到传奇时使用。 fromJS()
in reducer because I think that it is done anyway by the fact that I use fromJS()
for initialState. 我不在 reducer中使用 fromJS()
,因为我认为这是由于我对fromJS()
使用fromJS()
的事实而完成的。 Or am I wrong about that? 还是我错了? toJS()
in selector from reselect
so I can use js data in react component. 我在reselect
选择的选择器中使用toJS()
,因此可以在react组件中使用js数据。 Example: 例:
1) In my react component I do: 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) In reducer I do ( should one use fromJS()
here or not? According to redux docs you should): 2)在reducer中我可以做( 应该在这里不使用fromJS()
吗?根据redux docs的说明):
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) In my selector I do toJS()
again: 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(),
});
So basically I wonder if that is a correct flow of convertion between js and immutable. 所以基本上我想知道这是否是js和不可变之间的正确转换流程。 Or can it be optimized in some way (less convertion steps)? 还是可以某种方式对其进行优化(转换步骤更少)? Maybe the above is a non-optimal way of logic? 也许以上是一种非最佳的逻辑方式?
Best Regards 最好的祝福
The saga--being redux middleware--can handle Immutable types directly, no need to use an expensive toJS
call here 传奇-Redux中间件-可以直接处理不可变类型,无需在此处使用昂贵的toJS
调用
Any point you're converting (eg 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 您要转换的任何点(例如set
, setIn
, update
等)都将普通的JS非简单类型转换为Immutable redux状态树,请使用fromJS
来确保完全不可变的类型使整个状态树不可变
IMHO, selectors (eg 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. 恕我直言,选择器(例如reselect
)(通过在初始检索后提供便笺)可以成为使用昂贵的toJS
调用的最理想场所,如示例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 我想这真的取决于多少一个在他们的“容器/智能”组件使用不可改变的检索方法不喜欢,和/或创建一大堆选择的从Redux的状态树检索简单的JS类型使用一成不变的无处不在
To me there's the question of where to actually use the fromJS
call, eg action creators, in the "container/smart" components dispatch or, in the reducer, eg react-boilerplate
uses the fromJS
call in the reducer. 对我而言,存在一个问题,即在“容器/智能”组件调度中在哪里实际使用fromJS
调用,例如动作创建者,或者在化fromJS
器中,例如react-boilerplate
在化fromJS
中使用fromJS
调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.