About the Mutable and Immutable SessionObject

The SessionObject is introduced to fit (highly mutable || remote) data source under the Redux Store State. The concept is Simple:

  • the value inside can be Mutable
  • Object it self will be repacked to reflect each Update

The SessionObject should be defined with ServiceGeneratorFunction to store all the Data. The SessionObject is the Single Source of Truth. Data in the SessionObject can be updated in a Mutable way.

Here's some code:

// define here with initial Data
const session = { data: 'data' } 

const service = function * ({ store, req, res }) {
  const action = yield req('service:sample:init')

  // update Data in Mutable way: by set the new value directly 
  session.data = action.payload

  // send SessionObject to Reducer to update Redux State (ignore for now)
  yield res({ type: 'reducer:sample:update', payload: session })
}

While the Service changes the Session in a Mutable way, the Redux Store expect it to appear Immutable to detect the change.

To solve this, a customized Redux Reducer is needed to:

  • First repack the SessionObject
  • Then send the repack to the Redux Store

Redux-Service provides a createSessionReducer Function to quickly generate the Session-Update-Reducer: createSessionReducer API

So the Data Flow in Redux-Service will be like:

  • SessionObject: Single Source of Truth
  • loop:
    • ServiceGenerator: set value to SessionObject
    • Redux:Reducer: repack & push value
    • Redux:Store:State: detect changes
    • UI: render
    • Action: new values

And the Mutable and Immutable is separated at the SessionObject:

  • Redux:Store:State Immutable
    • [subLevelState] Immutable
      • SessionObject Immutable for State, Mutable for Service
        • sessionData Mutable
          • [subLevelSessionData] Mutable

About Redux Immutable Update Patterns

results matching ""

    No results matching ""