Question

我正在寻找一种在我的React应用程序中建模Redux状态的简洁方法。这是我可以做到的一种我真的不喜欢的方式：

const filmFuncs = {
    getTitles: function () {
        return this.currentTitles.map(function(film) {
            return film.title;
        });
    }
};

const defaultState = {
    'currentTitles': [],
    ...filmFuncs,
};

var reducer = (state=defaultState, action) => {
    switch (action.type) {
        case "GET_FILMS": {
            return {...state, currentTitles: action.payload};
            break;
        }
    }
    return state;
};

export default reducer;

所以现在我可以调用，this.props.films.getTitles（）;而不是在我的组件中放置逻辑。

或者，我认为我可以设置一个单独的模型类并传递状态，如下所示：

var filmModel = new FilmModel(this.props.films);
filmModel.getTitles();

尽管如此，我并不是真的热衷于这种方法。有什么想法吗？

Answer 1

所以现在我可以调用，this.props.films.getTitles（）; 而不是在我的组件中放置逻辑。

为什么你要避免在组件中放置逻辑呢？

这种逻辑最好放在容器/智能组件中。在您的用例中，此类组件将连接到Redux状态，执行 getTitles 选择并将所选数据传递给哑组件以进行渲染。

如果您确实想要避免将逻辑放在组件中，可以将其放入独立的帮助器/选择器文件中，然后在连接中使用选择器。您可以使用像Reselect这样的库来创建灵活的选择器。

我建议阅读Dan Abramov关于聪明与愚蠢组件的文章。链接here。

代码示例：

选择器文件：

export const titlesSelector = (state) => state.currentTitles.map(film => film.title)

组件文件：

//Imports
import { titlesSelector } from "./Selectors"

//The smart component

@connect(state => ({
  titles: titlesSelector(state)
}))
export default class SmartComponent extends React.Component {

  constructor() {
    super()

    this.getTitles = this.getTitles.bind(this)
  }

  render (
    return (
      <DumbComponent
        titles={this.props.titles}
      />
    )
  )
}

// The dumb component

const DumbComponent = ({ titles }) => 
<ul>
  {titles.map(title => <li>{title}</li>}
</ul>

在React中建模Redux状态

1 个答案: