How to Setup Redux in React without Immutable?

Question

I learned how to Redux with Teropa's incredible tutorial. However, his implementation uses Immutable and, while awesome, is something I want to remove from my current app's build. I'm trying to figure out how to maintain the following without relying on Immutable. I somehow need to modify reducer.js to take out Immutable, but the exported function keeps failing without state = Map().

Index.jsx

store.dispatch({
  type: 'SET_STATE',
  state: { ... }
});

action_creators.js

export function setState(state) {
  return {
    type: 'SET_STATE',
    state
  };
}

reducer.js

import { Map } from 'immutable';

function setState(state, newState) {
  return state.merge(newState);
}
export default function(state = Map(), action) {
  switch (action.type) {
  case 'SET_STATE':
    return setState(state, action.state);
  }
  return state;
}

You'll need to replace your Map with a standard JavaScript object and use Object.assign to merge things into it. I'd recommend reading the Reducers chapter in the official Redux tutorial - it takes you through this step by step. — Joe Clay
– Joe Clay, Commented Jul 29, 2016 at 8:45

trashgenerator · Accepted Answer · 2016-07-29 09:07:58Z

1

function setState(state, newState) {
  return {
    ...state,
    ...newState
  };
}
export default function(state = {}, action) {
  switch (action.type) {
  case 'SET_STATE':
    return setState(state, action.state);
  }
  return state;

Check how I use it in my state management library https://github.com/nosovsh/reduceless/blob/master/src/wrapReducerWithSetGlobalState.js#L9

answered Jul 29, 2016 at 9:07

trashgenerator

7014 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Setup Redux in React without Immutable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related