如何使用不可变js传递初始状态值

Question

我正在使用不可变 js，在我的 reducer 中，我正在像这样初始化状态：

     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,
    };
  }

在 Action Handlers 中，我声明状态为：

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

从我的组件中，我正在访问这样的年份：

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

所以，在整个场景中，我从一个 endpoint.I 中获取年份，希望将一些初始值传递给我的状态，以便我可以获得一些初始值。我可以在不使用不可变 js 的情况下轻松地做到这一点，但不确定如何在不可变状态下设置初始值 property.Any 提前帮助 appreciated.Thanks。

减速器：

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;
  }

} 联合减速机：

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

沙盒link：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
    };
};

//Reducer.js combine reducer 也放在同一个文件中

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);

希望这对您有所帮助。

如何使用不可变js传递初始状态值

how to pass initial state value using immutable js

reactjs

immutable.js

redux

react-redux