javascript - 在现有应用程序中实现 `combineReducers` 的规范方法

Question

我有一个 redux 存储，到目前为止，它非常简单，只需要一个 reducer 文件。但是我现在需要把它分开。使用 combineReducers{reducerOne, reducerTwo} 是我必须重构我的应用程序以进入以下实例的方式:

const mapStateToProps = state => ({
  prop1: state.prop1,
  /*...many more...*/
})

并将其更改为:

const mapStateToProps = state => ({
  prop1: state.reducerOne.prop1,
  /*...many more...*/
})

还是有更规范的方式？如果我去掉隐式返回并制作第一行 state = state.reducerOne 或其他内容，它可能会缩短一点。

是否有更好/更规范的方法来合并新命名空间的 reducer？

Answer 1

看看这些东西:

• > normalizr
• > normalizr + keyWindow concept talk
• > Reselect
• > ComputingDerivedData Post
• > react-reselect-and-redux post

---

使用这些工具和方法，您最终会从你的 reducer 中导出通用选择器，(它们正在解析来自 reducers 负责的子状态的通用数据)然后导入到rootReducer中它们用于创建另一组通用选择器来解析相同的数据，但来自状态的根。

然后基本上有 2 种概念上不同的方法可供选择:

• 保留组件(我们称之为“容器”或“智能”组件)特定选择器连同容器组件本身(下面的示例更多地是关于这种特殊情况)

• 有一个单独的“数据层”，它不太了解它将为其提供数据的组件并将面向数据/功能的选择器放在那里，使用您将为项目定义的模式进行组织。

当然，您可以在某种程度上将两者结合起来。但重要的是要弄清楚界限，让所有的东西都在它们所属的地方。

---

<...>/FooContainer/selectors.js与你一起 <...>/FooContainer/FooContainer.jsx组件。

---

reducers/entities.js

import { INITIAL_STATE } from 'initialState';

export default (state = INITIAL_STATE.entities, action) => {
  /* reducer */
};

export const getModelData = (entities, model, keyWindow) => {
  /*
   get model data from normalized entities store
   using model fields and the keyWindow
  */
};

reducers/index.js

// <...>

/* entities, location, contents - are reducers  */
import entities, * as fromEntities from './entities';
import location, * as fromLocation from './location';
import contents, * as fromContents from './contents';

// <...>

export const rootReducer = combineReducers({
  entities,
  location,
  contents,
});


const getEntities = state => state.entities;
const getLocation = state => state.location;
const getContents = state => state.contents;

// <...>

// this is a generic selector for getting the data from
// the entities store.
export const getModelData = createSelector(
  [getEntities, (state, model, keyWindow) => ({ model, keyWindow })],
  fromEntities.getModelData,
);

// ...

FooContainer/selectors.js

import { getModelData } from 'app/reducers';

export const componentData = createSelector(
  [getModelData, (state, model, keyWindow, props) => props],
  (modelData, props) => { /* do something specific for your component */},
);

FooContainer/FooContainer.jsx :

import { componentData } from './selectors';
import { FooModel } from 'fooFeature/models';
import { someFooAction, loadFooData } from 'fooFeature/actions';

const getKeyWindow = props => {/* return keyWindow */ };
const mapStateToProps = (state, props) => ({
  componentData: componentData(state, FooModel, getKeyWindow(props), props),
});
const mapDispatchToProps = {
  someFooAction,
  loadFooData,
};

@connect(mapStateToProps, mapDispatchToProps)
class FooContainer extends Component {
  static propTypes = {
    componentData: PropTypes.arrayOf(PropTypes.object),
    loadFooData: PropTypes.func.isRequired,
    someFooAction: PropTypes.func.isRequired,
  }

  /* <...> */
}