React /不可变-基本设置

Question

I'm trying to learn/ get my head around immutable so I can set it up with React/ Redux. Here's my store setup:

store.js

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
)

combine reducers:

import { combineReducers } from 'redux';
import { UIreducer } from './UI-reducer';

export default combineReducers({
  UIreducer
});

example reducer:

import { fromJS } from 'immutable';

const initialState = fromJS({
  test: false
});

export const UIreducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TEST': {
      return state.set('test', true)
    }
    default: return state
  }
}

I'm fairly sure i've set the above two parts up correctly, the only thing that i'm not sure about is how to map the state to props in my component:

Here's how I normally do it:

const mapStateToProps = state => ({
  UI: state.UIreducer
})

When using immutable it returns an object that immutable generates which doesn't look like a normal state object if I were to not use immutable. I tried after a bit of research to use .get with the state like so:

const mapStateToProps = state => ({
  UI: state.get('UIreducer')
})

This however returned the error message:

state.get is not a function

Could someone please point out where i've gone wrong?

Answer 1

You could use redux-immutable and convert the initialState to an immutable object:

import {
  combineReducers
 } from 'redux-immutable';

import {
 createStore
} from 'redux';

const initialState = Immutable.Map();
const rootReducer = combineReducers({UIreducer});

Answer 2

Remember the state is the combination of all reducers, so the state will look like the combined reducers object

export default combineReducers({
  UIreducer
});

At mapStateToProps you should ask for state.UIreducer and at the component level UI.get('test')

Answering further questions:

1. where exactly would I write the UI.get('test') ?

Anywhere in your component UI will be a prop for it, you can use it like this

const myComponent = (props) => {
 return <div>props.UI.get('test')</div>
}

2. I would have thought the .get('test') would go in the mapStateToProps somehwere.

That depends of which properties of your state you want to pass/map to your component, you can also pass an specifict

const mapStateToProps = state => ({
  test: state.UIreducer.get('test')
})

and inside of you component

const myComponent = (props) => {
 return <div>props.test</div>
}