在 React 中建模 Redux 状态

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();而不是将逻辑放入我的组件中。

或者，我想我可以建立一个单独的模型 class 并传递状态，就像这样：

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

不过我也不太喜欢这种方法。有什么想法吗？

Answer 1

So now I can call, this.props.films.getTitles(); instead of putting logic in my component.

您究竟为什么要避免在组件中放置逻辑？

这样的逻辑最好放在container/smart组件中。在您的 use-case 中，此类组件将连接到 Redux 状态，执行 getTitles 选择并将所选数据传递给哑组件以呈现它。

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

我建议阅读 Dan Abramov 撰写的关于智能组件与非智能组件的文章。 Link 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 状态

Modelling Redux state in React

reactjs

redux

react-redux