Question

我正在努力学习/了解不可变因此我可以使用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不是函数

有人可以指出我哪里出错了吗？

Answer 1

您可以使用redux-immutable并将initialState转换为不可变对象：

import {
  combineReducers
 } from 'redux-immutable';

import {
 createStore
} from 'redux';

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

Answer 2

请记住，状态是所有reducer的组合，因此状态看起来就像组合的reducers对象

export default combineReducers({
  UIreducer
});

在mapStateToProps，您应该要求state.UIreducer并在组件级别UI.get('test')

回答进一步的问题：

我在哪里写下UI.get('test')？

组件UI中的任何地方都是它的支柱，您可以像这样使用它

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

React / Immutable - 基本设置

2 个答案: