React / Immutable - базовая настройка - PullRequest
Новая
       21

React / Immutable - базовая настройка

0 голосов
/ 24 мая 2018

Я пытаюсь выучить / обдумать неизменность, чтобы я мог настроить его с помощью React / Redux.Вот мои настройки магазина:

store.js 

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

Комбинированные редукторы: 

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

export default combineReducers({
  UIreducer
});

пример редуктора: 

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
  }
}

Я вполне уверен, что правильно настроил две вышеупомянутые части, единственное, в чем я не уверен, так это как сопоставить состояние с подпорками вмой компонент:

Вот как я обычно это делаю: 

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

При использовании immutable он возвращает объект, который генерирует immutable, который не выглядит как объект нормального состояния, если бы я неиспользовать неизменный.После небольшого исследования я попытался использовать .get с таким состоянием, как: 

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

Это, однако, вернуло сообщение об ошибке:

state.get не является функцией

Может кто-нибудь указать, где я ошибся?

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Помните, что состояние - это комбинация всех редукторов, поэтому состояние будет выглядеть как объединенный объект редукторов 

export default combineReducers({
  UIreducer
});

При mapStateToProps вы должны запросить state.UIreducer и на уровне компонента UI.get('test')

Отвечая на дополнительные вопросы:

  1. где именно я напишу UI.get('test')?

В любом месте в вашем компоненте пользовательский интерфейс будет опора для него, вы можете использовать это так 

const myComponent = (props) => {
 return <div>props.UI.get('test')</div>
}
Я бы подумал, что .get('test') будет идти в mapStateToProps, где-то.

Это зависит от того, какие свойства вашего состояния вы хотите передать / сопоставить с вашим компонентом, вы также можете передатьспецифический 

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

и внутри вас компонент 

const myComponent = (props) => {
 return <div>props.test</div>
}
0 голосов
/ 24 мая 2018

Вы можете использовать redux-immutable и преобразовать initialState в неизменяемый объект: 

import {
  combineReducers
 } from 'redux-immutable';

import {
 createStore
} from 'redux';

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