Question

我是redux的新手，我发现每个小东西x变成x_success和x_failure，通常在获取数据或尝试创建新实体时，这意味着更多的动作创建者，以及更多的reducers处理。这里推荐的方法是什么？感谢。

Answer 1

推荐的方法是x_success，x_failure等。但这仅适用于异步操作。让我们看看为什么：

SPA中的异步操作是您想要了解的操作

操作开始时，
当你收到回复时
回复类型，成功或失败

这样你就会有单独的动作创建者函数返回对象和一个异步动作创建函数，它可以返回函数而不是对象，并从其体内调用其他动作创建者。

由于上述原因，您应该有单独的动作创建者，一个异步动作创建者，当然对于每个动作创建者，您应该在reducer中有一个常量。

假设您在单独的文件夹中编写常量，动作和缩减器，这可能是一场噩梦。如果是这种情况，您应该看看duck modular redux。

Duck modular redux是你应该定义的，以减少样板。其他的东西，如单独的动作创建者，单独的常量，单独检查减少器的常量是必需的。没有什么可以让它感到难过。

Answer 2

我从2年前的故事开始以来几乎开始使用Redux。虽然它是一件好事，它允许消除整个类型的错误并使所有业务逻辑更加明确，但它有很多概念。对于每个实体，您需要创建：

常量（对于每个状态 - 在异步函数的情况下，有三个，用于启动，失败和成功）
行动（功能）
reducer（更新状态，有时是嵌套更新）

有人提到你可以像redux-ducks这样的东西，这是一种组织你的代码的方法，但你不会写更少的代码。因此，我坚信人们应该考虑更严肃地围绕redux编写自己的包装器。

我写了一个库redux-tiles，它完全处理这种情况 - 它需要负担创建常量，更新状态（所以你不需要自己编写一个reducer），以及如果需要，可以进行嵌套更新。因此，异步请求的代码看起来像这样：

import { createTile } from 'redux-tiles';
const apiRequest = createTile({
  type: ['api', 'request'],
  fn: ({ api, params }) => api.get('/api/items', params),
});

它还允许您更轻松地合并其他操作，因为在fn您可以访问dispatch和actions。您可以查看更多示例here。

Answer 3

我开始使用Redux并且我喜欢这个概念，但我对大量的样板文件感到非常恼火。我最终创建了 actionware lib。基本上这就是你对动作软件的所作所为：

不再有动作创建者和动作类型，只是动作（简单功能）和减少者
操作自动发送结果
每个
每个异步操作没有额外代码忙状态的操作（是的，没有额外的代码！）
可取消的行动

Answer 4

有许多方法可以减少bolierplate。这是来自官方回购的优秀资源： https://github.com/reactjs/redux/blob/master/docs/recipes/ReducingBoilerplate.md

此外，还有各种社区驱动的库可以帮助您减少redux样板并更好地组织您的商店。 Redux Box在这方面可能会让您感兴趣：

https://github.com/anish000kumar/redux-box

Answer 5

巨大的样板通常是助焊剂结构的缺点之一。您可能想结帐redux-fluent，因为它的设计考虑了这一点。

import { createAction, createReducer, ofType } from 'redux-fluent';

const addTodo = createAction('todos | add');

export const todos = createReducer('todos')
  .actions(
    ofType(actions.addTodo).map(
      (state, { payload }) => state.concat(payload),
    ),
  )
  .default(() => []);

Answer 6

要减少Redux样板，您可以使用redux-blaze描述一个功能来生成动作创建者和简化器：

import { buildReducer } from "redux-blaze";

export const { actionCreators, reducer: filtersReducer } = buildReducer(initialState, {
    setMySearch: ({ search }) /* <- payload */ => state => ({ ...state, search }),
    setCategory: ({ category }) => state => ({ ...state, category }),
    setSort: ({ sort }) => state => ({ ...state, sort }),
}, {
    prefix: 'MY_FILTER',
});

...

// Just add auto generated reducer to root reducer:
export const rootReducer = combineReducers({
  filters: filtersReducer
})

...

// dispatch an action:
dispatch(actionCreators.setCategory({category: 'my category'}))

您还可以在此处找到TypeScript示例： https://github.com/spiderpoul/redux-blaze

如何减少redux样板

6 个答案: