如何在使用Immutable JS map

时间:2017-09-04 10:57:03

标签: javascript reactjs redux immutable.js

我是redux的新手,请问这是在下​​面的代码中执行redux的正确方法吗? 当操作调用执行currentTime时,这是一个reducer方法。

import { combineReducers } from 'redux';
import { UPDATE_TIME } from './actions';
import { Map } from 'immutable';

 const initialState = Map({update:false, currentTime: ""});

 function currentTime(state = initialState, action) {
  switch (action.type) {
    case UPDATE_TIME:
      return {...state, update: true, currentTime: action.time };
    default:
      return state;
  }
} 

const currentTimeReducer = combineReducers({
    currentTime
});

export default currentTimeReducer

2 个答案:

答案 0 :(得分:3)

有多种方法可以做到这一点

  1. 您可以使用 set() 功能

    设置值
      case UPDATE_TIME:
         state = state.set('update', true);
         return state.set('currentTime', action.time);
    

    甚至

     case UPDATE_TIME:
         return state.set('update', true)
                     .set('currentTime', action.time);
    
  2. 但是,当您进行多项更改时,这是不可行的

    1. 另一个选项是 merge()

      case UPDATE_TIME:
         return state.merge({update: true, currentTime: action.time})
      
    2. 但是,如果嵌套状态更新,则需要执行deepMerge。查看 mergeDeep

      的详细信息

答案 1 :(得分:0)

我们使用不可变JS在现有对象的每个小变化上创建新实例。不可变JS MAP有set方法来设置属性并返回对象的新实例。 Here您可以找到MAP的api doc

import { combineReducers } from 'redux';
    import { UPDATE_TIME } from './actions';
    import { Map } from 'immutable';

     const initialState = Map({update:false, currentTime: ""});

     function currentTime(state = initialState, action) {
      switch (action.type) {
        case UPDATE_TIME:
            let newState = state;
            newState = newState.set('update', true );
            newState = newState.set('currentTime', action.time);
            return newState;
        default:
          return state;
      }
    } 

    const currentTimeReducer = combineReducers({
        currentTime
    });

    export default currentTimeReducer

查看this doc

中的最佳做法