web-dev-qa-db-ja.com

Reduxレデューサー内のReselctセレクターの使用方法

私のアプリには、さまざまなコンテナーオブジェクトによって使用されるセレクターの大規模なコレクションが既にあります。これらは、状態のさまざまな部分にアクセスし、状態のリファクタリングをはるかに簡単にするのに最適です。

次に、一部のリデューサー関数内でセレクターを使用したいと思います。問題は、レデューサー内でstateパラメーターが状態の特定のスライスを参照するのに対し、セレクター関数は状態のルートオブジェクトで呼び出されることを期待していることです。

考案された例：

/* Selectors */
const getTodos = state => state.todos;

const getUncompletedTodos = createSelector(
    [ getTodos ],
    todos => todos.filter(t => !t.completed)
);

/* Reducer */
const todosReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'REMOVE_COMPLETED_TODOS':
      return getUncompletedTodos(state); // <-- this won't work
  }
}
reduxreselect
12
burtyish

セレクターはルート状態オブジェクトから機能します。

これを偽造するには、あなたがすることができます

 return getUncompletedTodos({todos: state});

しかし、私見より良いアイデアは、フィルタリング機能を再利用することです

/* Selectors */
const getTodos = state => state.todos;

const filterCompleted = todos => todos.filter(t => !t.completed)

const getUncompletedTodos = createSelector(
    [ getTodos ],
    filterCompleted
);

// inside reducer
case 'REMOVE_COMPLETED_TODOS':
    return filterCompleted(state);
9
Yury Tarabanko