how to merge between old fashion redux and riduce

[arezki1990]

hello , your lib is awesome , i have an existing react app and i want to migrate it to riduce without changing the old store can you provide me an example to do that please ( how to combine the old reducers with riduce reducers) i used combineReducers but it's not working

thanks in advance

[richardcrng]

Thanks @arezki1990 for your kind words!

I will definitely aim to produce some good documentation on migration from vanilla Redux.

It's not obvious how, but - luckily - it is very simple when you know how!

import oldReducer from './oldReducer'
import riduceReducer from './riduceReducer'
import initialState from './initialState'

export const mainReducer = (state = initialState, action) => action.leaf
  ? riduceReducer(state)
  : oldReducer(state) 

Here's why this should work:

• An action produced by Riduce always has a leaf property (this is an implementation detail)
• (I'm assuming your normal action creators don't give actions the leaf property)
• Therefore, for our mainReducer:
  • If the leaf property is present, pass it to the riduceReducer, which will know how to handle it
  • If it is not, it's a legacy action, so pass it to the oldReducer
• Return whatever we get back as the next value of state

Try it out and let me know how it works? Happy to try to explain more.

[arezki1990]

thanks for your reply i have this reducer with immutable state

/**
 * Combine all reducers in this file and export the combined reducers.
 */
import { reducer as form } from 'redux-form/immutable';
import { combineReducers } from 'redux-immutable';
import { connectRouter } from 'connected-react-router/immutable';
import history from 'utils/history';

import languageProviderReducer from 'containers/LanguageProvider/reducer';
import contact from 'enl-containers/SampleApps/Contact/reducers/contactReducer';
import contactFullstack from 'enl-containers/SampleFullstackApps/Contact/reducers/contactReducer';
import email from 'enl-containers/SampleApps/Email/reducers/emailReducer';
import emailFullstack from 'enl-containers/SampleFullstackApps/Email/reducers/emailReducer';
import todo from 'enl-containers/SampleApps/Todo/reducers/todoReducer';
import todoFullstack from 'enl-containers/SampleFullstackApps/Todo/reducers/todoReducer';
import crudTable from 'enl-containers/Tables/reducers/crudTbReducer';
import timeline from 'enl-containers/Pages/Timeline/reducers/timelineReducer';
import chat from 'enl-containers/Pages/Chat/reducers/chatReducers';
import ecommerce from 'enl-containers/Pages/Ecommerce/reducers/ecommerceReducers';
import treeTable from 'enl-containers/Tables/reducers/treeTbReducers';

// Global Reducers
import authReducer from './modules/authReducer';
import uiReducer from './modules/uiReducer';
import initval from './modules/initFormReducer';

/**
 * Branching reducers to use one reducer for many components
 */

function branchReducer(reducerFunction, reducerName) {
  return (state, action) => {
    const { branch } = action;
    const isInitializationCall = state === undefined;
    if (branch !== reducerName && !isInitializationCall) {
      return state;
    }
    return reducerFunction(state, action);
  };
}

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers = {}) {
  const rootReducer = combineReducers({
    form,
    ui: uiReducer,
    initval,
    contact,
    contactFullstack,
    email,
    emailFullstack,
    todo,
    todoFullstack,
    authReducer,
    timeline,
    chat,
    ecommerce,
    crudTableDemo: branchReducer(crudTable, 'crudTableDemo'),
    treeTableArrow: branchReducer(treeTable, 'treeTableArrow'),
    treeTablePM: branchReducer(treeTable, 'treeTablePM'),
    language: languageProviderReducer,
    router: connectRouter(history),
    ...injectedReducers,
  });

  // Wrap the root reducer and return a new root reducer with router state
  const mergeWithRouterState = connectRouter(history);
  return mergeWithRouterState(rootReducer);
}

and i did this

const mainReducer = (state = museumState, action) => action.leaf
  ? reducer(state)
  : createReducer()(state)
  const store = createStore(
    mainReducer,
   // fromJS(initialState),
    composeEnhancers(...enhancers),
  );

but it doesn't work , i have this error combineReducers.js:31 The previous state received by the reducer is of unexpected type. Expected argument to be an instance of Immutable.Collection or Immutable.Record with the following properties: "form", "ui", "initval", "contact", "contactFullstack", "email", "emailFullstack", "todo", "todoFullstack", "authReducer", "timeline", "chat", "ecommerce", "crudTableDemo", "treeTableArrow", "treeTablePM", "language", "router". eval @ combineReducers.js:31 mainReducer @ configureStore.js?c0cf:48 p @ VM129748:1 v @ VM129748:1 (anonymous) @ VM129748:1 dispatch @ redux.js:211 createStore @ redux.js:293 (anonymous) @ VM129748:1 (anonymous) @ VM129748:1 (anonymous) @ VM129748:1 eval @ redux.js:608 (anonymous) @ VM129748:1 createStore @ redux.js:85 configureStore @ configureStore.js?c0cf:49 eval @ app.js?9fee:36 ./app/app.js @ main.js:1184 __webpack_require__ @ main.js:787 fn @ main.js:150 0 @ main.js:8350 __webpack_require__ @ main.js:787 checkDeferredModules @ main.js:46 (anonymous) @ main.js:924 (anonymous) @ main.js:927 combineReducers.js:35 Uncaught TypeError: inputState.withMutations is not a function at eval (combineReducers.js:35) at mainReducer (configureStore.js?c0cf:48) at p (<anonymous>:1:36402) at v (<anonymous>:1:36684) at <anonymous>:1:40069 at dispatch (redux.js:211) at createStore (redux.js:293) at <anonymous>:1:47480 at <anonymous>:1:33759 at <anonymous>:1:26192

[richardcrng]

Ah. So Riduce as a library hasn't been written with Immutable.js or redux-immutable in mind (indeed, I've never used Immutable.js) - I think the way it's written probably doesn't support either Imutable.Collection or Immutable.Record.

I'm not sure - I haven't tested this - so maybe it's worth spinning up a minimal example to check?

As an alternative to Immutable.js, you might want to check out Immer (which Riduce uses under-the-hood). I know this doesn't help with an existing codebase you don't want to migrate, though...

[arezki1990]

thanks i fixed the issue ,just i removed the immutable state type