как передать значение начального состояния с помощью неизменяемого js

Question

Я использую неизменяемый js, и в моем редукторе я инициализирую состояние следующим образом:

     export default function reducer(state = new Map(), action = {}) {
      switch (action.type) {
        case actionType.SET_YEARS:
          return handlers.setYears(state, fromJS(action.Years));

       default:
       return state;
   }
 }

И затем в своем действии я создал создателя действия следующим образом:

    function setYears(Years) {
     return {
       type: types.SET_YEARS,
       Years,
    };
  }

И в обработчиках действий я объявляю это состояние:

  export const setYears = (state, Years) => state.set('Years',Years);

Из моего компонента я получаю доступ к годам следующим образом:

years: state.app.get('Years') where app is the reducer name:

Итак, во всем сценарии , Я получаю годы от конечной точки. Я хочу передать некоторое начальное значение своему состоянию, чтобы я мог получить некоторые начальные значения. Я мог бы сделать это легко, не используя неизменяемый js, но не уверен, как установить начальные значения в неизменяемом свойстве состояния. Любая помощь будет очень признательна. Спасибо заранее.

reducer:

import { Map } from 'immutable';
import * as handlers from './actionHandlers';
import * as actionType from './actionTypes';

const initialState = new Map({
  Years: [{ year: 2017 }, { year: 2016 }],
});
export default function reducer(state = new Map(), action = {}) {
  switch (action.type) {

    case actionType.SET_YEARS:
      return handlers.setYears(state, fromJS(action.Years));

    default:
      return state;
  }

} combReducer:

  const reducer = combineReducers({
    app: appReducer,
  });

ссылка на песочницу: https://codesandbox.io/s/youthful-williams-hnrg1?file= / src / YearsView. js

Answer 1

Вам просто нужно передать объект в начальное состояние.

вы можете сделать

const initialState = Map({Years:1});

Я обновлю полный код в соответствии с комментариями к предоставленному ответу

//Actions.js
export const updateYears = Years => {
    return {
        type: 'UpdateYears',
         Years
    };
};

// Редуктор. js Комбайн-редуктор также помещается в тот же файл

const setYears = (state, Years) => state.set('Years', Years);
const initialState = new Map({
    Years: [{ year: 2017 }, { year: 2016 }],
});
const commonReducer = (state = initialState, action = {}) => {
    switch (action.type) {

        case 'UpdateYears':
            return setYears(state, [...state.get('Years'),fromJS(action.Years)]);

        default:
            return state;
    }
};

export default combineReducers({
    common: commonReducer
});

//Years View
const YearsView = props => {
    useEffect(() => {
        console.log(JSON.stringify(props.years));
        setTimeout(()=>{
            props.dateActions.updateYears([{ years: 333 }]);
        },2000);
    }, []);

    return (
        <div>
            {
                JSON.stringify(props.years)
            }
        </div>
    );
}

export default connect(state => ({
    years: state.common.get('Years')
}), dispatch => {
    return {
        dateActions: bindActionCreators(actions, dispatch)
    }
})(YearsView);

Когда монтируется просмотр лет, useeffect запускает действие через 2 секунды

const YearsView = props => {
    useEffect(() => {
        console.log(JSON.stringify(props.years));
        setTimeout(()=>{
            props.dateActions.updateYears([{ years: 333 }]);
        },2000);
    }, []);

    return (
        <div>
            {
                JSON.stringify(props.years)
            }
        </div>
    );
}

export default connect(state => ({
    years: state.common.get('Years')
}), dispatch => {
    return {
        dateActions: bindActionCreators(actions, dispatch)
    }
})(YearsView);

Надеюсь, это поможет.