Rematch Select

给Rematch使用的selectors插件

安装

npm install @rematch/select

对于@rematch/core@0.x 使用 @rematch/select@0.3.0

设置

import selectorsPlugin from '@rematch/select'
import { init } from '@rematch/core'

const select = selectorsPlugin()

init({
  plugins: [select]
})

selectors

selectors: { [string]: (state, ...params) => any }

selectors是只读状态的片段。

{
  name: 'cart',
  state: [{
    price: 42.00,
    amount: 3,
  }],
  selectors: {
    total(state) {
      return state.reduce((a, b) => a + (b.price * b.amount), 0)
    }
  }
}

注意：默认情况下，selector state不是指完整的state，而仅指model内的state。 要更改此行为，请使用下面描述的sliceState配置选项。

selector可以在应用程序的任何位置调用。

import { select } from '@rematch/select'

const store = init({ ... })

select.cart.total(store.getState())

选择器也可以用于memoization库，如reselect。

import { createSelector } from 'reselect'

{
  selectors: {
    total: createSelector(
      state => state,
      state => state.reduce((a, b) => a + (b.price * b.amount), 0)
    )
  }
}

配置选项

selectorPlugin()方法将接受具有以下属性的配置对象。

sliceState:

sliceState: (rootState, model) => any

一个选项，允许用户指定state在传递给selector之前将如何切片。该函数将rootState作为第一个参数，并将selector对应的model作为第二个参数。它应该返回selector所需要的状态切片。

缺省情况是返回与拥有model名称相对应的state切片，但是这里假定store是一个Javascript对象。 大多数时候应该使用默认值。但是，有些情况下可能需要指定sliceState函数。

示例1 - 在选择器中使用根 state 而不是切片：

这很容易通过在getState配置中返回rootState完成：

const select = selectorsPlugin({ sliceState: rootState => rootState });

现在，传递给所有selector的state参数将成为 root state。

示例1 - 使用不可变的 JS 对象作为store

如果你正在使用一个 Immutable.js Map 作为你的 store，你将需要使用 Map.get() 切片该 state ：

const select = selectorsPlugin({ sliceState: (rootState, model) => rootState.get(model.name) })

现在你可以使用一个 Immutable.js Map 来作为你的 store 并且在每个你的 selector 中访问适当的 state 片段。