Using with Immutable.js

[oskarer]

I'm trying to use redux-await with Immutable.js, however it does not seem to work. The following was my code before trying Immutable.js, which works fine:

import { createReducer } from 'redux-await';
const initialState = {
  user: null
}

const user = (state = initialState, action) => {
  switch (action.type) {
    case 'SIGN_IN':
      const { authToken } = action.payload.response;
      return Object.assign({}, state, {
        authToken
      })
    default:
      return state
  }
}

export default createReducer(user);

However trying the same thing with Immutable generates an error, saying that "undefined is not a function". Cannot figure out exactly where that is tho.

import { createReducer } from 'redux-await';
import { Map } from 'immutable';
const initialState = Map({})

let user = (state = initialState, action) => {
  switch (action.type) {
    case 'SIGN_IN':
      const { authToken } = action.payload.response;
      state.set('authToken', authToken);
      return state;
    default:
      return state
  }
}

export default createReducer(user);

Is redux-await suppose to work with Immutable.js or is it a limitation it has?

[kolodny]

redux-await is meant to be used with plain objects. In order to make it work with any other store type we would need to wrap the reducer state and either require the container to either use connect from redux-await, or get props from a custom function

Either

-- import { connect } from 'react-redux';
++ import { connect } from 'redux-await';
@connect(state => state)
class App extends Component {
}

or this:

++ import { getProps } from 'redux-await';
render() {
--  const { dispatch, users } = this.props;
++  const { dispatch } = this.props;
++  const { users } = getProps(this.props)
}

[oskarer]

I was able to make a very dirty fix to get it to run with Immutable.js Maps, which obviously doesn't work with plain javascript objects. What do you think of this approach? Could redux-await be modified to handle both Immutable.js and plain javascript objects?

[kolodny]

If it works for your use case, then fork it and use that. My plan is to use a custom connecter similar to what redux-form does, something like this

export const function connect(mapStateToProps, ...rest) {
  return reduxConnect(state => {
    const props = mapStateToProps(state);
    const { statuses, errors } = state.await;
    return { ...props, statuses, errors };
  }, ...rest);
}

and also require control over a branch of the tree like most other higher order redux modules:

const reducers = combineReducers({
  todos: todosReducer,
  await: awaitReducer,
})

expect a v5 sometime soon

[kolodny]

BTW to use your fork, you would need to remove the lib/ entry from your package.json, run npm run build then commit that then npm install oskarer/redux-await on your consumer project

[oskarer]

Alright, thanks! Closing this issue then.

[kolodny]

@oskarer Just pushed 5.0.0, it should solve the issue you were having