反应/不可变 - 基本设置

Question

我正在尝试学习/了解不可变的概念，以便可以使用 React/Redux 进行设置。这是我的商店设置：

store.js

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

组合减速器：

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

export default combineReducers({
  UIreducer
});

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

我很确定我已经正确设置了上述两个部分，唯一我不确定的是如何将状态映射到我的组件中的道具：

这是我通常的做法：

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

当使用 immutable 时，它​​会返回一个 immutable 生成的对象，如果我不使用 immutable，它看起来不像正常状态对象。经过一番研究后，我尝试在状态下使用 .get，如下所示：

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

然而，这返回了错误消息：

state.get 不是函数

谁能指出我哪里出错了？

Answer 1

记住 state 是所有 reducers 的组合，所以 state 看起来就像组合的 reducers 对象

export default combineReducers({
  UIreducer
});

在mapStateToProps 你应该要求state.UIreducer 和在组件级别UI.get('test')

回答更多问题：

1. UI.get('test') 到底要写在哪里？

你的组件 UI 中的任何地方都会成为它的道具，你可以像这样使用它

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

1. 我原以为.get('test') 会出现在mapStateToProps 中。

这取决于你想要传递/映射到你的组件的状态属性，你也可以传递一个细节

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

在你的组件内部

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

Answer 2

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

import {
  combineReducers
 } from 'redux-immutable';

import {
 createStore
} from 'redux';

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