javascript - Redux 从 Reducer 看到其他状态

Question

想象一个包含两个 React 组件的 UI:

<FilterContainer />

<UserListContainer />

我们从服务器拉取一组用户:

[
  {
    name: 'John',
    enjoys: ['Sailing', 'Running']
  },
  {
    name: 'Bob',
    enjoys: ['Running', 'Eating']
  },
  {
    name: 'Frank',
    enjoys: ['Sailing', 'Eating']
  }
]

UI 看起来有点像这样:

过滤器:航海 运行 饮食

用户列表:

约翰

弗兰克

您可以点击过滤器或用户。为了进入这个阶段，我们点击了“航行”，然后点击了“弗兰克”(也许我们在屏幕中间看到了一张弗兰克的漂亮照片)。

我的 Redux 状态，使用 combineReducers 构建，看起来像这样:

{
  ui: { 
    filter: {enjoys: 'Sailing'},
    userList: {selected: 'John'}
  }
  data: [user array]
}

我有两个 Action ，SELECT_USER和 SELECT_FILTER .

当我点击过滤器时(SELECT_FILTER 触发)，我想要 ui.userList.selected如果该用户仍在过滤器中，则保留，并且 ui.userList.selected如果用户不在过滤器中，则设置为 null。

因此，如果我现在单击“吃”，我将看到一个包含 Bob 和 Frank 的列表，并且选中了 Frank。但是，如果我单击“运行”，我会看到 John 和 Bob，但他们都没有被选中。

但是，我在传统的 Redux 方法中很难做到这一点。当 userList reducer 看到 SELECT_FILTER操作，它无法检查 data state 来查看当前选择的用户是否仍然在该过滤条件中。

正确的做法是什么？

function filter(state = {enjoys: null}, action) {
  switch (action.type) {
    case SELECT_FILTER:
      return {
        ...state,
        enjoys: action.enjoys
      }
    default:
      return state
  }
}

function userList(state = {selected: null}, action) {
  switch (action.type) {
    case SELECT_USER:
      return {
        ...state,
        selected: action.name
      }
    default:
      return state
  }
}

const ui = combineReducers({
  filter,
  userList
})

let initialUsers = [
  {
    name: 'John',
    enjoys: ['Sailing', 'Running']
  },
  {
    name: 'Bob',
    enjoys: ['Running', 'Eating']
  },
  {
    name: 'Frank',
    enjoys: ['Sailing', 'Eating']
  }
]

const rootReducer = combineReducers({
  ui,
  data: (state=initialUsers) => state // in reality, loaded from server
})

export default rootReducer

Answer 1

Reducer 应该只知道状态的一小部分。

描述逻辑的好地方是 Action 创建者。使用 redux-thunk，您将能够根据全局状态做出决定。

function selectFilter(enjoys) {
  return (dispatch, getState) => {
    dispatch({type: SELECT_FILTER, enjoys});
    // if getState().ui.userList.selected exists in getState().data
    dispatch({type: SELECT_USER, name: null});
  }
};