Redux-Saga using Immutable.js and state is always empty

Question

I am trying to wrap my head around redux and sagas and I think I have set something up wrong and i'm hoping someone can lend some insight.

I have created my store with my inital state and I dispatch an action, as seen here:


const initialState = fromJS({
 product: {},
 basket: {},
 global: {}
});

const reducers = combineReducers({ product, basket, global });

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducers, 
initialState, 
applyMiddleware(sagaMiddleware))

initSagas(sagaMiddleware);
store.dispatch(retrieveSiteKeyValues())
return store;
};

Combine Reducers is from redux-immutable.

My saga function:

export function* fetchSiteKeyValuesSaga() {
    yield take(RETRIEVE_SITE_KEY_VALUES) 
    const siteKeyValues = yield call(retrieveSiteKeyValues)
    yield put(storeSiteKeyValues(siteKeyValues));
}

My reducer function:

const storeSiteKeyValues = (state, payload) => {

  payload.anotherObject = {};
  payload.anotherMap = new Map();
  const newState = fromJS({ payload })
  return newState  

// OR return state.merge({ global: { siteKey: action.siteKey } }); ?
}

When I interrogate the state object the size is zero. I expected the size to be at least 3 due to my initalState. When the newState is 'created' the size is 4. But when it drops back into the state switch statement, the state size is zero again:

export default (state, action) => {
  switch (action.type) {
    case STORE_SITE_KEY_VALUES : {
      return storeSiteKeyValues (state, action.payload);
    }    
    default:
      return state;
  }
}

Im 90% sure just dumping over the state as I am doing in the reducer function is wrong and i should be using set() or setIn() i thought update() would make more sense, but when I use those methods the state is always empty or 'undefined' if I try to enact .get(x) in the console.

When I inspect the state in the browser it looks like this:

storeState:{
   [2],
   [2]
   [2]
 }

The array expanded looks like this:

0:"product"
1:{anotherObject :{}, anotherMap: map()
size:1

I would expect the values that were part of of the payload to be here not just the new object and map.

Am I initaiting my state incorrectly at the store creation? Am I approaching redux and state management in the wrong way?

Please create a working solution of your on (CodeSandbox)[https://codesandbox.io] or a similar site your comfortable with, for two reasons: - sometimes (it happened to me a lot of times) you find the bug yourself trying to replicate the issue - if you don't solve it yourself... no problem, we're here for that, but we could jump directly in a working solution, debug and fix it in no time (usually I take more time replicating the context instead of finding you a solution) Waiting for you — NoriSte, Jan 28 '19 at 06:17

score 0 · Answer 1 · answered Jan 28 '19 at 06:20

0

I want to be sure you aren't missing a fundamental part: where is the sagaMiddleware.run(YOUR_SAGA); call? Is it hidden inside initSagas?

answered Jan 28 '19 at 06:20

NoriSte

3,589
1
19
18

score 0 · Answer 2 · edited Apr 21 '19 at 16:58

It was setting my inital state twice, once when I was initialsing my store and again when the reducer inital state was read. My state in my reducer was an empty object as it would be if on the time of reducer 'activation'. In the end I realised i'm not reading some 'remembered' state from anywhere, I just needed some inital values. Which I moved into the reducer and remvoed the immutable js from my app as it was confusing matters.

Some lessons for all you newbies to react/redux-saga! Don't try and over complicate matters. Learn what immutable mean! Figure out for yourself if you need it, in my case just having one source of truth and access to state was enough.

Further reading: Initalising State , Immutable and State considerations

Redux-Saga using Immutable.js and state is always empty

2 Answers2